<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/media.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:37 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=iframe-embed-object.html>← 4.8.5 The
  iframe element</a> — <a href=index.html>Table of Contents</a> — <a href=image-maps.html>4.8.12 The map element →</a></nav><ol class=toc><li id=toc-semantics><ol><li><ol><li><a href=media.html#the-video-element><span class=secno>4.8.8</span> The <code>video</code> element</a><li><a href=media.html#the-audio-element><span class=secno>4.8.9</span> The <code>audio</code> element</a><li><a href=media.html#the-track-element><span class=secno>4.8.10</span> The <code>track</code> element</a><li><a href=media.html#media-elements><span class=secno>4.8.11</span> Media elements</a><ol><li><a href=media.html#error-codes><span class=secno>4.8.11.1</span> Error codes</a><li><a href=media.html#location-of-the-media-resource><span class=secno>4.8.11.2</span> Location of the media resource</a><li><a href=media.html#mime-types><span class=secno>4.8.11.3</span> MIME types</a><li><a href=media.html#network-states><span class=secno>4.8.11.4</span> Network states</a><li><a href=media.html#loading-the-media-resource><span class=secno>4.8.11.5</span> Loading the media resource</a><li><a href=media.html#offsets-into-the-media-resource><span class=secno>4.8.11.6</span> Offsets into the media resource</a><li><a href=media.html#ready-states><span class=secno>4.8.11.7</span> Ready states</a><li><a href=media.html#playing-the-media-resource><span class=secno>4.8.11.8</span> Playing the media resource</a><li><a href=media.html#seeking><span class=secno>4.8.11.9</span> Seeking</a><li><a href=media.html#media-resources-with-multiple-media-tracks><span class=secno>4.8.11.10</span> Media resources with multiple media tracks</a><ol><li><a href=media.html#audiotracklist-and-videotracklist-objects><span class=secno>4.8.11.10.1</span> <code>AudioTrackList</code> and <code>VideoTrackList</code> objects</a><li><a href=media.html#selecting-specific-audio-and-video-tracks-declaratively><span class=secno>4.8.11.10.2</span> Selecting specific audio and video tracks declaratively</a></ol><li><a href=media.html#timed-text-tracks><span class=secno>4.8.11.11</span> Timed text tracks</a><ol><li><a href=media.html#text-track-model><span class=secno>4.8.11.11.1</span> Text track model</a><li><a href=media.html#sourcing-in-band-text-tracks><span class=secno>4.8.11.11.2</span> Sourcing in-band text tracks</a><li><a href=media.html#sourcing-out-of-band-text-tracks><span class=secno>4.8.11.11.3</span> Sourcing out-of-band text tracks</a><li><a href=media.html#guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.8.11.11.4</span> Guidelines for exposing cues in various formats as text track cues</a><li><a href=media.html#text-track-api><span class=secno>4.8.11.11.5</span> Text track API</a><li><a href=media.html#cue-events><span class=secno>4.8.11.11.6</span> Event handlers for objects of the text track APIs</a><li><a href=media.html#best-practices-for-metadata-text-tracks><span class=secno>4.8.11.11.7</span> Best practices for metadata text tracks</a></ol><li><a href=media.html#identifying-a-track-kind-through-a-url><span class=secno>4.8.11.12</span> Identifying a track kind through a URL</a><li><a href=media.html#user-interface><span class=secno>4.8.11.13</span> User interface</a><li><a href=media.html#time-ranges><span class=secno>4.8.11.14</span> Time ranges</a><li><a href=media.html#the-trackevent-interface><span class=secno>4.8.11.15</span> The <code>TrackEvent</code> interface</a><li><a href=media.html#mediaevents><span class=secno>4.8.11.16</span> Events summary</a><li><a href=media.html#security-and-privacy-considerations><span class=secno>4.8.11.17</span> Security and privacy considerations</a><li><a href=media.html#best-practices-for-authors-using-media-elements><span class=secno>4.8.11.18</span> Best practices for authors using media elements</a><li><a href=media.html#best-practices-for-implementers-of-media-elements><span class=secno>4.8.11.19</span> Best practices for implementers of media elements</a></ol></ol></ol></ol><h4 id=the-video-element><span class=secno>4.8.8</span> The <dfn id=video data-dfn-type=element><code>video</code></dfn> element<a href=#the-video-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video title="The <video> HTML element embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.">Element/video</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement title="Implemented by the <video> element, the HTMLVideoElement interface provides special properties and methods for manipulating video objects. It also inherits properties and methods of HTMLMediaElement and HTMLElement.">HTMLVideoElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-video-element:concept-element-categories>Categories</a>:<dd><a id=the-video-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-video-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-video-element:embedded-content-category href=dom.html#embedded-content-category>Embedded content</a>.<dd>If the element has a <code id=the-video-element:attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute: <a id=the-video-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd><a id=the-video-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-video-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-video-element:embedded-content-category-2 href=dom.html#embedded-content-category>embedded content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-video-element:concept-element-content-model>Content model</a>:<dd>If the element has a <code id=the-video-element:attr-media-src><a href=#attr-media-src>src</a></code> attribute:
 zero or more <code id=the-video-element:the-track-element><a href=#the-track-element>track</a></code> elements, then
 <a id=the-video-element:transparent href=dom.html#transparent>transparent</a>, but with no <a href=#media-element id=the-video-element:media-element>media element</a> descendants.<dd>If the element does not have a <code id=the-video-element:attr-media-src-2><a href=#attr-media-src>src</a></code> attribute: zero or more <code id=the-video-element:the-source-element><a href=embedded-content.html#the-source-element>source</a></code> elements, then
 zero or more <code id=the-video-element:the-track-element-2><a href=#the-track-element>track</a></code> elements, then
 <a id=the-video-element:transparent-2 href=dom.html#transparent>transparent</a>, but with no <a href=#media-element id=the-video-element:media-element-2>media element</a> descendants.<dt><a href=dom.html#concept-element-tag-omission id=the-video-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-video-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-video-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-video-element:attr-media-src-3><a href=#attr-media-src>src</a></code> —  Address of the resource
     <dd><code id=the-video-element:attr-media-crossorigin><a href=#attr-media-crossorigin>crossorigin</a></code> —  How the element handles crossorigin requests
     <dd><code id=the-video-element:attr-video-poster><a href=#attr-video-poster>poster</a></code> —  Poster frame to show prior to video playback
     <dd><code id=the-video-element:attr-media-preload><a href=#attr-media-preload>preload</a></code> —  Hints how much buffering the <a href=#media-resource id=the-video-element:media-resource>media resource</a> will likely need
     <dd><code id=the-video-element:attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> —  Hint that the <a href=#media-resource id=the-video-element:media-resource-2>media resource</a> can be started automatically when the page is loaded
     <dd><code id=the-video-element:attr-video-playsinline><a href=#attr-video-playsinline>playsinline</a></code> —  Encourage the user agent to display video content within the element's playback area
     <dd><code id=the-video-element:attr-media-loop><a href=#attr-media-loop>loop</a></code> —  Whether to loop the <a href=#media-resource id=the-video-element:media-resource-3>media resource</a>
     <dd><code id=the-video-element:attr-media-muted><a href=#attr-media-muted>muted</a></code> —  Whether to mute the <a href=#media-resource id=the-video-element:media-resource-4>media resource</a> by default
     <dd><code id=the-video-element:attr-media-controls-2><a href=#attr-media-controls>controls</a></code> —  Show user agent controls
     <dd><code id=the-video-element:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> —  Horizontal dimension
     <dd><code id=the-video-element:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> —  Vertical dimension
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-video-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-video>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-video>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-video-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlvideoelement' data-dfn-type='interface'><c- g>HTMLVideoElement</c-></dfn> : <a href='#htmlmediaelement' id='the-video-element:htmlmediaelement'><c- n>HTMLMediaElement</c-></a> {
  [<a id='the-video-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-video-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-video-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <dfn data-dfn-for='HTMLVideoElement' id='dom-video-width' data-dfn-type='attribute'><c- g>width</c-></dfn>;
  [<a id='the-video-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-video-element:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <dfn data-dfn-for='HTMLVideoElement' id='dom-video-height' data-dfn-type='attribute'><c- g>height</c-></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-video-videowidth' id='the-video-element:dom-video-videowidth'><c- g>videoWidth</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-video-videoheight' id='the-video-element:dom-video-videoheight'><c- g>videoHeight</c-></a>;
  [<a id='the-video-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflecturl' id='the-video-element:xattr-reflecturl'><c- g>ReflectURL</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <dfn data-dfn-for='HTMLVideoElement' id='dom-video-poster' data-dfn-type='attribute'><c- g>poster</c-></dfn>;
  [<a id='the-video-element:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-video-element:xattr-reflect-3'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLVideoElement' id='dom-video-playsinline' data-dfn-type='attribute'><c- g>playsInline</c-></dfn>;
};</code></pre>
   </dl>

  <p>A <code id=the-video-element:the-video-element><a href=#the-video-element>video</a></code> element is used for playing videos or movies, and audio files with
  captions.</p>

  <p>Content may be provided inside the <code id=the-video-element:the-video-element-2><a href=#the-video-element>video</a></code> element. User agents
  should not show this content to the user; it is intended for older web browsers which do
  not support <code id=the-video-element:the-video-element-3><a href=#the-video-element>video</a></code>, so that text can be shown to the users of these older browsers
  informing them of how to access the video contents.</p>

  <p class=note>In particular, this content is not intended to address accessibility concerns. To
  make video content accessible to the partially sighted, the blind, the hard-of-hearing, the deaf,
  and those with other physical or cognitive disabilities, a variety of features are available.
  Captions can be provided, either embedded in the video stream or as external files using the
  <code id=the-video-element:the-track-element-3><a href=#the-track-element>track</a></code> element. Sign-language tracks can be embedded in the video stream. Audio
  descriptions can be embedded in the video stream or in text form using a <a id=the-video-element:webvtt-file href=https://w3c.github.io/webvtt/#webvtt-file data-x-internal=webvtt-file>WebVTT file</a>
  referenced using the <code id=the-video-element:the-track-element-4><a href=#the-track-element>track</a></code> element and synthesized into speech by the user agent.
  WebVTT can also be used to provide chapter titles. For users who would rather not use a media
  element at all, transcripts or other textual alternatives can be provided by simply linking to
  them in the prose near the <code id=the-video-element:the-video-element-4><a href=#the-video-element>video</a></code> element. <a href=references.html#refsWEBVTT>[WEBVTT]</a></p>

  <p>The <code id=the-video-element:the-video-element-5><a href=#the-video-element>video</a></code> element is a <a href=#media-element id=the-video-element:media-element-3>media element</a> whose <a href=#media-data id=the-video-element:media-data>media data</a> is
  ostensibly video data, possibly with associated audio data.</p>

  <p>The <code id=the-video-element:attr-media-src-4><a href=#attr-media-src>src</a></code>, <code id=the-video-element:attr-media-crossorigin-2><a href=#attr-media-crossorigin>crossorigin</a></code>,
  <code id=the-video-element:attr-media-preload-2><a href=#attr-media-preload>preload</a></code>, <code id=the-video-element:attr-media-autoplay-2><a href=#attr-media-autoplay>autoplay</a></code>,
  <code id=the-video-element:attr-media-loop-2><a href=#attr-media-loop>loop</a></code>, <code id=the-video-element:attr-media-muted-2><a href=#attr-media-muted>muted</a></code>, and <code id=the-video-element:attr-media-controls-3><a href=#attr-media-controls>controls</a></code> attributes are <a href=#media-element-attributes id=the-video-element:media-element-attributes>the attributes common to all media elements</a>.</p>

  <p>The <dfn data-dfn-for=video id=attr-video-poster data-dfn-type=element-attr><code>poster</code></dfn>
  attribute gives the <a id=the-video-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of an image file that the user agent can show while no video
  data is available.  The attribute, if present, must contain a <a id=the-video-element:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL
  potentially surrounded by spaces</a>.</p>

  

  <p>If the specified resource is to be used, then, when the element is created or when the <code id=the-video-element:attr-video-poster-2><a href=#attr-video-poster>poster</a></code> attribute is set, changed, or removed, the user agent must
  run the following steps to determine the element's <dfn id=poster-frame>poster frame</dfn> (regardless of the
  value of the element's <a href=#show-poster-flag id=the-video-element:show-poster-flag>show poster flag</a>):</p> 

  <ol><li><p>If there is an existing instance of this algorithm running for this <code id=the-video-element:the-video-element-6><a href=#the-video-element>video</a></code>
   element, abort that instance of this algorithm without changing the <a href=#poster-frame id=the-video-element:poster-frame>poster
   frame</a>.<li><p>If the <code id=the-video-element:attr-video-poster-3><a href=#attr-video-poster>poster</a></code> attribute's value is the empty string
   or if the attribute is absent, then there is no <a href=#poster-frame id=the-video-element:poster-frame-2>poster frame</a>; return.<li><p>Let <var>url</var> be the result of <a id=the-video-element:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a> given the <code id=the-video-element:attr-video-poster-4><a href=#attr-video-poster>poster</a></code> attribute's value, relative to the element's <a id=the-video-element:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
   document</a>.<li><p>If <var>url</var> is failure, then return. <span class=note>There is no <a href=#poster-frame id=the-video-element:poster-frame-3>poster
   frame</a>.</span><li><p>Let <var>request</var> be a new <a href=https://fetch.spec.whatwg.org/#concept-request id=the-video-element:concept-request data-x-internal=concept-request>request</a> whose <a href=https://fetch.spec.whatwg.org/#concept-request-url id=the-video-element:concept-request-url data-x-internal=concept-request-url>URL</a> is <var>url</var>, <a href=https://fetch.spec.whatwg.org/#concept-request-client id=the-video-element:concept-request-client data-x-internal=concept-request-client>client</a> is the element's <a id=the-video-element:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s
   <a id=the-video-element:relevant-settings-object href=webappapis.html#relevant-settings-object>relevant settings object</a>, <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=the-video-element:concept-request-destination data-x-internal=concept-request-destination>destination</a> is "<code>image</code>", <a href=https://fetch.spec.whatwg.org/#request-initiator-type id=the-video-element:concept-request-initiator-type data-x-internal=concept-request-initiator-type>initiator type</a> is "<code>video</code>",
   <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=the-video-element:concept-request-credentials-mode data-x-internal=concept-request-credentials-mode>credentials mode</a> is "<code>include</code>", and whose <a id=the-video-element:use-url-credentials-flag href=https://fetch.spec.whatwg.org/#concept-request-use-url-credentials-flag data-x-internal=use-url-credentials-flag>use-URL-credentials flag</a> is set.

   <li><p><a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-video-element:concept-fetch data-x-internal=concept-fetch>Fetch</a> <var>request</var>. This must
   <a id=the-video-element:delay-the-load-event href=parsing.html#delay-the-load-event>delay the load event</a> of the element's <a id=the-video-element:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>If an image is thus obtained, the <a href=#poster-frame id=the-video-element:poster-frame-4>poster frame</a> is that image. Otherwise,
   there is no <a href=#poster-frame id=the-video-element:poster-frame-5>poster frame</a>.</ol>

  

  <p class=note>The image given by the <code id=the-video-element:attr-video-poster-5><a href=#attr-video-poster>poster</a></code> attribute,
  the <i id=the-video-element:poster-frame-6><a href=#poster-frame>poster frame</a></i>, is intended to be a representative frame of the
  video (typically one of the first non-blank frames) that gives the user an idea of what the video
  is like.</p>


  <p>The <dfn data-dfn-for=video id=attr-video-playsinline data-dfn-type=element-attr><code>playsinline</code></dfn> attribute is a <a id=the-video-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean
  attribute</a>. If present, it serves as a hint to the user agent that the video ought to be
  displayed "inline" in the document by default, constrained to the element's playback area, instead
  of being displayed fullscreen or in an independent resizable window.</p>

  <p class=note>The absence of the <code id=the-video-element:attr-video-playsinline-2><a href=#attr-video-playsinline>playsinline</a></code>
  attribute does not imply that the video will display fullscreen by default. Indeed, most user
  agents have chosen to play all videos inline by default, and in such user agents the <code id=the-video-element:attr-video-playsinline-3><a href=#attr-video-playsinline>playsinline</a></code> attribute has no effect.</p>

  

  <hr>

  <p>A <code id=the-video-element:the-video-element-7><a href=#the-video-element>video</a></code> element represents what is given for the first matching condition in the
  list below:</p>

  <dl class=switch><dt>When no video data is available (the element's <code id=the-video-element:dom-media-readystate><a href=#dom-media-readystate>readyState</a></code> attribute is either <code id=the-video-element:dom-media-have_nothing><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, or <code id=the-video-element:dom-media-have_metadata><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> but no video data has yet been obtained at
   all, or the element's <code id=the-video-element:dom-media-readystate-2><a href=#dom-media-readystate>readyState</a></code> attribute is any
   subsequent value but the <a href=#media-resource id=the-video-element:media-resource-5>media resource</a> does not have a video channel)<dd>The <code id=the-video-element:the-video-element-8><a href=#the-video-element>video</a></code> element <a id=the-video-element:represents href=dom.html#represents>represents</a> its <a href=#poster-frame id=the-video-element:poster-frame-7>poster frame</a>, if any,
   or else <a id=the-video-element:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a> with no <a id=the-video-element:natural-dimensions href=https://drafts.csswg.org/css-images/#natural-dimensions data-x-internal=natural-dimensions>natural dimensions</a>.<dt>When the <code id=the-video-element:the-video-element-9><a href=#the-video-element>video</a></code> element is <a href=#dom-media-paused id=the-video-element:dom-media-paused>paused</a>, the <a href=#current-playback-position id=the-video-element:current-playback-position>current playback position</a> is the first frame of video,
   and the element's <a href=#show-poster-flag id=the-video-element:show-poster-flag-2>show poster flag</a> is set<dd>The <code id=the-video-element:the-video-element-10><a href=#the-video-element>video</a></code> element <a id=the-video-element:represents-2 href=dom.html#represents>represents</a> its <a href=#poster-frame id=the-video-element:poster-frame-8>poster frame</a>, if any,
   or else the first frame of the video.<dt>When the <code id=the-video-element:the-video-element-11><a href=#the-video-element>video</a></code> element is <a href=#dom-media-paused id=the-video-element:dom-media-paused-2>paused</a>, and the
   frame of video corresponding to the <a href=#current-playback-position id=the-video-element:current-playback-position-2>current playback
   position</a> is not available (e.g. because the video is seeking or buffering)<dt>When the <code id=the-video-element:the-video-element-12><a href=#the-video-element>video</a></code> element is neither <a href=#potentially-playing id=the-video-element:potentially-playing>potentially playing</a> nor <a href=#dom-media-paused id=the-video-element:dom-media-paused-3>paused</a> (e.g. when seeking or stalled)<dd>The <code id=the-video-element:the-video-element-13><a href=#the-video-element>video</a></code> element <a id=the-video-element:represents-3 href=dom.html#represents>represents</a> the last frame of the video to have
   been rendered.<dt>When the <code id=the-video-element:the-video-element-14><a href=#the-video-element>video</a></code> element is <a href=#dom-media-paused id=the-video-element:dom-media-paused-4>paused</a><dd>The <code id=the-video-element:the-video-element-15><a href=#the-video-element>video</a></code> element <a id=the-video-element:represents-4 href=dom.html#represents>represents</a> the frame of video corresponding to
   the <a href=#current-playback-position id=the-video-element:current-playback-position-3>current playback position</a>.<dt>Otherwise (the <code id=the-video-element:the-video-element-16><a href=#the-video-element>video</a></code> element has a video channel and is <a href=#potentially-playing id=the-video-element:potentially-playing-2>potentially
   playing</a>)<dd>The <code id=the-video-element:the-video-element-17><a href=#the-video-element>video</a></code> element <a id=the-video-element:represents-5 href=dom.html#represents>represents</a> the frame of video at the continuously
   increasing <a href=#current-playback-position id=the-video-element:current-playback-position-4>"current" position</a>. When the
   <a href=#current-playback-position id=the-video-element:current-playback-position-5>current playback position</a> changes such that the last frame rendered is no longer the
   frame corresponding to the <a href=#current-playback-position id=the-video-element:current-playback-position-6>current playback position</a> in the video, the new frame
   must be rendered.</dl>

  <p>Frames of video must be obtained from the video track that was <a href=#dom-videotrack-selected id=the-video-element:dom-videotrack-selected>selected</a> when the <a id=the-video-element:event-loop href=webappapis.html#event-loop>event loop</a> last reached
  <a href=webappapis.html#step1>step 1</a>.</p>

  <p class=note>Which frame in a video stream corresponds to a particular playback position is
  defined by the video stream's format.</p>

  <p>The <code id=the-video-element:the-video-element-18><a href=#the-video-element>video</a></code> element also <a id=the-video-element:represents-6 href=dom.html#represents>represents</a> any <a href=#text-track-cue id=the-video-element:text-track-cue>text track cues</a> whose <a href=#text-track-cue-active-flag id=the-video-element:text-track-cue-active-flag>text track cue active flag</a> is set and whose
  <a href=#text-track id=the-video-element:text-track>text track</a> is in the <a href=#text-track-showing id=the-video-element:text-track-showing>showing</a> mode, and any
  audio from the <a href=#media-resource id=the-video-element:media-resource-6>media resource</a>, at the <a href=#current-playback-position id=the-video-element:current-playback-position-7>current playback position</a>.</p>

  <p>Any audio associated with the <a href=#media-resource id=the-video-element:media-resource-7>media resource</a> must, if played, be played
  synchronized with the <a href=#current-playback-position id=the-video-element:current-playback-position-8>current playback position</a>, at the element's <a href=#effective-media-volume id=the-video-element:effective-media-volume>effective
  media volume</a>. The user agent must play the audio from audio tracks that were <a href=#dom-audiotrack-enabled id=the-video-element:dom-audiotrack-enabled>enabled</a> when the <a id=the-video-element:event-loop-2 href=webappapis.html#event-loop>event loop</a> last reached step
  1.</p>

  <p>In addition to the above, the user agent may provide messages to the user (such as "buffering",
  "no video loaded", "error", or more detailed information) by overlaying text or icons on the video
  or other areas of the element's playback area, or in another appropriate manner.</p>

  <p>User agents that cannot render the video may instead make the element <a href=dom.html#represents id=the-video-element:represents-7>represent</a> a link to an external video playback utility or to the video
  data itself.</p>

  <p>When a <code id=the-video-element:the-video-element-19><a href=#the-video-element>video</a></code> element's <a href=#media-resource id=the-video-element:media-resource-8>media resource</a> has a video channel, the
  element provides a <a id=the-video-element:paint-source href=https://drafts.csswg.org/css-images-4/#paint-source data-x-internal=paint-source>paint source</a> whose width is the <a href=#media-resource id=the-video-element:media-resource-9>media resource</a>'s
  <a href=#concept-video-intrinsic-width id=the-video-element:concept-video-intrinsic-width>natural width</a>, whose height is the
  <a href=#media-resource id=the-video-element:media-resource-10>media resource</a>'s <a href=#concept-video-intrinsic-height id=the-video-element:concept-video-intrinsic-height>natural
  height</a>, and whose appearance is the frame of video corresponding to the <a href=#current-playback-position id=the-video-element:current-playback-position-9>current playback position</a>, if that is available, or else
  (e.g. when the video is seeking or buffering) its previous appearance, if any, or else (e.g.
  because the video is still loading the first frame) blackness.</p>

  <hr>

  

  <dl class=domintro><dt><code><var>video</var>.<a href=#dom-video-videowidth id=dom-video-videowidth-dev>videoWidth</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoWidth title="The HTMLVideoElement interface's read-only videoWidth property indicates the intrinsic width of the video, expressed in CSS pixels. In simple terms, this is the width of the media in its natural size.">HTMLVideoElement/videoWidth</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dt><code><var>video</var>.<a href=#dom-video-videoheight id=dom-video-videoheight-dev>videoHeight</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/videoHeight title="The HTMLVideoElement interface's read-only videoHeight property indicates the intrinsic height of the video, expressed in CSS pixels. In simple terms, this is the height of the media in its natural size.">HTMLVideoElement/videoHeight</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dd>
    <p>These attributes return the natural dimensions of the video, or 0 if the dimensions are not
    known.</p>
   </dl>

  

  <p>The <dfn id=concept-video-intrinsic-width>natural
  width</dfn> and <dfn id=concept-video-intrinsic-height>natural height</dfn> of the <a href=#media-resource id=the-video-element:media-resource-11>media resource</a> are
  the dimensions of the resource in <a href=https://drafts.csswg.org/css-values/#px id="the-video-element:'px'" data-x-internal="'px'">CSS pixels</a> after taking into account
  the resource's dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for
  the format used by the resource. If an anamorphic format does not define how to apply the aspect
  ratio to the video data's dimensions to obtain the "correct" dimensions, then the user agent must
  apply the ratio by increasing one dimension and leaving the other unchanged.</p>

  <p>The <dfn data-dfn-for=HTMLVideoElement id=dom-video-videowidth data-dfn-type=attribute><code>videoWidth</code></dfn> IDL attribute must return the <a href=#concept-video-intrinsic-width id=the-video-element:concept-video-intrinsic-width-2>natural width</a> of the video in <a href=https://drafts.csswg.org/css-values/#px id="the-video-element:'px'-2" data-x-internal="'px'">CSS pixels</a>. The <dfn data-dfn-for=HTMLVideoElement id=dom-video-videoheight data-dfn-type=attribute><code>videoHeight</code></dfn> IDL attribute must return the <a href=#concept-video-intrinsic-height id=the-video-element:concept-video-intrinsic-height-2>natural height</a> of the video in <a href=https://drafts.csswg.org/css-values/#px id="the-video-element:'px'-3" data-x-internal="'px'">CSS pixels</a>. If the element's <code id=the-video-element:dom-media-readystate-3><a href=#dom-media-readystate>readyState</a></code> attribute is <code id=the-video-element:dom-media-have_nothing-2><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, then the attributes must return 0.</p>

  <p id=dimUpdate>Whenever the <a href=#concept-video-intrinsic-width id=the-video-element:concept-video-intrinsic-width-3>natural width</a>
  or <a href=#concept-video-intrinsic-height id=the-video-element:concept-video-intrinsic-height-3>natural height</a> of the video changes
  (including, for example, because the <a href=#dom-videotrack-selected id=the-video-element:dom-videotrack-selected-2>selected video
  track</a> was changed), if the element's <code id=the-video-element:dom-media-readystate-4><a href=#dom-media-readystate>readyState</a></code>
  attribute is not <code id=the-video-element:dom-media-have_nothing-3><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, the user agent must
  <a href=#queue-a-media-element-task id=the-video-element:queue-a-media-element-task>queue a media element task</a> given the <a href=#media-element id=the-video-element:media-element-4>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-video-element:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=the-video-element:event-media-resize><a href=#event-media-resize>resize</a></code> at the <a href=#media-element id=the-video-element:media-element-5>media element</a>.</p>

  

  <p>The <code id=the-video-element:the-video-element-20><a href=#the-video-element>video</a></code> element supports <a id=the-video-element:dimension-attributes href=embedded-content-other.html#dimension-attributes>dimension attributes</a>.</p>

  

  <p>In the absence of style rules to the contrary, video content should be rendered inside the
  element's playback area such that the video content is shown centered in the playback area at the
  largest possible size that fits completely within it, with the video content's aspect ratio being
  preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the
  video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area
  that do not contain the video represent nothing.</p>

  <p class=note>In user agents that implement CSS, the above requirement can be implemented by
  using the <a href=rendering.html#video-object-fit>style rule suggested in the Rendering section</a>.</p>

  <p>The <a id=the-video-element:natural-width href=https://drafts.csswg.org/css-images/#natural-width data-x-internal=natural-width>natural width</a> of a <code id=the-video-element:the-video-element-21><a href=#the-video-element>video</a></code> element's playback area is the
  <a id=the-video-element:natural-width-2 href=https://drafts.csswg.org/css-images/#natural-width data-x-internal=natural-width>natural width</a> of the <a href=#poster-frame id=the-video-element:poster-frame-9>poster frame</a>, if that is available and the
  element currently <a id=the-video-element:represents-8 href=dom.html#represents>represents</a> its poster frame; otherwise, it is the <a href=#concept-video-intrinsic-width id=the-video-element:concept-video-intrinsic-width-4>natural width</a> of the video resource, if that is
  available; otherwise the <a id=the-video-element:natural-width-3 href=https://drafts.csswg.org/css-images/#natural-width data-x-internal=natural-width>natural width</a> is missing.</p>

  <p>The <a id=the-video-element:natural-height href=https://drafts.csswg.org/css-images/#natural-height data-x-internal=natural-height>natural height</a> of a <code id=the-video-element:the-video-element-22><a href=#the-video-element>video</a></code> element's playback area is the
  <a id=the-video-element:natural-height-2 href=https://drafts.csswg.org/css-images/#natural-height data-x-internal=natural-height>natural height</a> of the <a href=#poster-frame id=the-video-element:poster-frame-10>poster frame</a>, if that is available and the
  element currently <a id=the-video-element:represents-9 href=dom.html#represents>represents</a> its poster frame; otherwise it is the <a href=#concept-video-intrinsic-height id=the-video-element:concept-video-intrinsic-height-4>natural height</a> of the video resource, if that is
  available; otherwise the <a id=the-video-element:natural-height-3 href=https://drafts.csswg.org/css-images/#natural-height data-x-internal=natural-height>natural height</a> is missing.</p>

  <p>The <a id=the-video-element:default-object-size href=https://drafts.csswg.org/css-images/#default-object-size data-x-internal=default-object-size>default object size</a> is a width of 300 <a href=https://drafts.csswg.org/css-values/#px id="the-video-element:'px'-4" data-x-internal="'px'">CSS pixels</a>
  and a height of 150 <a href=https://drafts.csswg.org/css-values/#px id="the-video-element:'px'-5" data-x-internal="'px'">CSS pixels</a>. <a href=references.html#refsCSSIMAGES>[CSSIMAGES]</a></p>

  <hr>

  <p>User agents should provide controls to enable or disable the display of closed captions, audio
  description tracks, and other additional data associated with the video stream, though such
  features should, again, not interfere with the page's normal rendering.</p>

  <p>User agents may allow users to view the video content in manners more suitable to the user,
  such as fullscreen or in an independent resizable window. User agents may even trigger such a
  viewing mode by default upon playing a video, although they should not do so when the <code id=the-video-element:attr-video-playsinline-4><a href=#attr-video-playsinline>playsinline</a></code> attribute is specified. As with the other user
  interface features, controls to enable this should not interfere with the page's normal rendering
  unless the user agent is <a href=#expose-a-user-interface-to-the-user id=the-video-element:expose-a-user-interface-to-the-user>exposing a user
  interface</a>. In such an independent viewing mode, however, user agents may make full user
  interfaces visible, even if the <code id=the-video-element:attr-media-controls-4><a href=#attr-media-controls>controls</a></code> attribute is
  absent.</p>

  <p>User agents may allow video playback to affect system features that could interfere with the
  user's experience; for example, user agents could disable screensavers while video playback is in
  progress.</p>

  <hr>

  

  <div class=example>

   <p>This example shows how to detect when a video has failed to play correctly:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>function</c-> failed<c- p>(</c->e<c- p>)</c-> <c- p>{</c->
   <c- c1>// video playback failed - show a message saying why</c->
   <c- k>switch</c-> <c- p>(</c->e<c- p>.</c->target<c- p>.</c->error<c- p>.</c->code<c- p>)</c-> <c- p>{</c->
     <c- k>case</c-> e<c- p>.</c->target<c- p>.</c->error<c- p>.</c->MEDIA_ERR_ABORTED<c- o>:</c->
       alert<c- p>(</c-><c- t>&apos;You aborted the video playback.&apos;</c-><c- p>);</c->
       <c- k>break</c-><c- p>;</c->
     <c- k>case</c-> e<c- p>.</c->target<c- p>.</c->error<c- p>.</c->MEDIA_ERR_NETWORK<c- o>:</c->
       alert<c- p>(</c-><c- t>&apos;A network error caused the video download to fail part-way.&apos;</c-><c- p>);</c->
       <c- k>break</c-><c- p>;</c->
     <c- k>case</c-> e<c- p>.</c->target<c- p>.</c->error<c- p>.</c->MEDIA_ERR_DECODE<c- o>:</c->
       alert<c- p>(</c-><c- t>&apos;The video playback was aborted due to a corruption problem or because the video used features your browser did not support.&apos;</c-><c- p>);</c->
       <c- k>break</c-><c- p>;</c->
     <c- k>case</c-> e<c- p>.</c->target<c- p>.</c->error<c- p>.</c->MEDIA_ERR_SRC_NOT_SUPPORTED<c- o>:</c->
       alert<c- p>(</c-><c- t>&apos;The video could not be loaded, either because the server or network failed or because the format is not supported.&apos;</c-><c- p>);</c->
       <c- k>break</c-><c- p>;</c->
     <c- k>default</c-><c- o>:</c->
       alert<c- p>(</c-><c- t>&apos;An unknown error occurred.&apos;</c-><c- p>);</c->
       <c- k>break</c-><c- p>;</c->
   <c- p>}</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>video</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;tgif.vid&quot;</c-> <c- e>autoplay</c-> <c- e>controls</c-> <c- e>onerror</c-><c- o>=</c-><c- s>&quot;failed(event)&quot;</c-><c- p>&gt;&lt;/</c-><c- f>video</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;tgif.vid&quot;</c-><c- p>&gt;</c->Download the video file<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>




  





  <h4 id=the-audio-element><span class=secno>4.8.9</span> The <dfn id=audio data-dfn-type=element><code>audio</code></dfn> element<a href=#the-audio-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio title="The <audio> HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.">Element/audio</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement title="The HTMLAudioElement interface provides access to the properties of <audio> elements, as well as methods to manipulate them.">HTMLAudioElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-audio-element:concept-element-categories>Categories</a>:<dd><a id=the-audio-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-audio-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-audio-element:embedded-content-category href=dom.html#embedded-content-category>Embedded content</a>.<dd>If the element has a <code id=the-audio-element:attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute: <a id=the-audio-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd>If the element has a <code id=the-audio-element:attr-media-controls-2><a href=#attr-media-controls>controls</a></code> attribute: <a id=the-audio-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-audio-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-audio-element:embedded-content-category-2 href=dom.html#embedded-content-category>embedded content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-audio-element:concept-element-content-model>Content model</a>:<dd>If the element has a <code id=the-audio-element:attr-media-src><a href=#attr-media-src>src</a></code> attribute:
zero or more <code id=the-audio-element:the-track-element><a href=#the-track-element>track</a></code> elements, then
<a id=the-audio-element:transparent href=dom.html#transparent>transparent</a>, but with no <a href=#media-element id=the-audio-element:media-element>media element</a> descendants.<dd>If the element does not have a <code id=the-audio-element:attr-media-src-2><a href=#attr-media-src>src</a></code> attribute: zero or more <code id=the-audio-element:the-source-element><a href=embedded-content.html#the-source-element>source</a></code> elements, then
 zero or more <code id=the-audio-element:the-track-element-2><a href=#the-track-element>track</a></code> elements, then
 <a id=the-audio-element:transparent-2 href=dom.html#transparent>transparent</a>, but with no <a href=#media-element id=the-audio-element:media-element-2>media element</a> descendants.<dt><a href=dom.html#concept-element-tag-omission id=the-audio-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-audio-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-audio-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-audio-element:attr-media-src-3><a href=#attr-media-src>src</a></code> —  Address of the resource
     <dd><code id=the-audio-element:attr-media-crossorigin><a href=#attr-media-crossorigin>crossorigin</a></code> —  How the element handles crossorigin requests
     <dd><code id=the-audio-element:attr-media-preload><a href=#attr-media-preload>preload</a></code> —  Hints how much buffering the <a href=#media-resource id=the-audio-element:media-resource>media resource</a> will likely need
     <dd><code id=the-audio-element:attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> —  Hint that the <a href=#media-resource id=the-audio-element:media-resource-2>media resource</a> can be started automatically when the page is loaded
     <dd><code id=the-audio-element:attr-media-loop><a href=#attr-media-loop>loop</a></code> —  Whether to loop the <a href=#media-resource id=the-audio-element:media-resource-3>media resource</a>
     <dd><code id=the-audio-element:attr-media-muted><a href=#attr-media-muted>muted</a></code> —  Whether to mute the <a href=#media-resource id=the-audio-element:media-resource-4>media resource</a> by default
     <dd><code id=the-audio-element:attr-media-controls-3><a href=#attr-media-controls>controls</a></code> —  Show user agent controls
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-audio-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-audio>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-audio>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-audio-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->,
 <a id='the-audio-element:legacyfactoryfunction' href='https://webidl.spec.whatwg.org/#LegacyFactoryFunction' data-x-internal='legacyfactoryfunction'><c- g>LegacyFactoryFunction</c-></a>=<a href='#dom-audio' id='the-audio-element:dom-audio'><c- n>Audio</c-></a>(<c- b>optional</c-> <c- b>DOMString</c-> <c- g>src</c->)]
<c- b>interface</c-> <dfn id='htmlaudioelement' data-dfn-type='interface'><c- g>HTMLAudioElement</c-></dfn> : <a href='#htmlmediaelement' id='the-audio-element:htmlmediaelement'><c- n>HTMLMediaElement</c-></a> {
  [<a id='the-audio-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();
};</code></pre>
   </dl>

  <p>An <code id=the-audio-element:the-audio-element><a href=#the-audio-element>audio</a></code> element <a id=the-audio-element:represents href=dom.html#represents>represents</a> a sound or audio stream.</p>

  

  <p>Content may be provided inside the <code id=the-audio-element:the-audio-element-2><a href=#the-audio-element>audio</a></code> element. User agents
  should not show this content to the user; it is intended for older web browsers which do
  not support <code id=the-audio-element:the-audio-element-3><a href=#the-audio-element>audio</a></code>, so that text can be shown to the users of these older browsers
  informing them of how to access the audio contents.</p>

  <p class=note>In particular, this content is not intended to address accessibility concerns. To
  make audio content accessible to the deaf or to those with other physical or cognitive
  disabilities, a variety of features are available. If captions or a sign language video are
  available, the <code id=the-audio-element:the-video-element><a href=#the-video-element>video</a></code> element can be used instead of the <code id=the-audio-element:the-audio-element-4><a href=#the-audio-element>audio</a></code> element to
  play the audio, allowing users to enable the visual alternatives. Chapter titles can be provided
  to aid navigation, using the <code id=the-audio-element:the-track-element-3><a href=#the-track-element>track</a></code> element and a <a id=the-audio-element:webvtt-file href=https://w3c.github.io/webvtt/#webvtt-file data-x-internal=webvtt-file>WebVTT file</a>. And,
  naturally, transcripts or other textual alternatives can be provided by simply linking to them in
  the prose near the <code id=the-audio-element:the-audio-element-5><a href=#the-audio-element>audio</a></code> element. <a href=references.html#refsWEBVTT>[WEBVTT]</a></p>

  <p>The <code id=the-audio-element:the-audio-element-6><a href=#the-audio-element>audio</a></code> element is a <a href=#media-element id=the-audio-element:media-element-3>media element</a> whose <a href=#media-data id=the-audio-element:media-data>media data</a> is
  ostensibly audio data.</p>

  <p>The <code id=the-audio-element:attr-media-src-4><a href=#attr-media-src>src</a></code>, <code id=the-audio-element:attr-media-crossorigin-2><a href=#attr-media-crossorigin>crossorigin</a></code>,
  <code id=the-audio-element:attr-media-preload-2><a href=#attr-media-preload>preload</a></code>, <code id=the-audio-element:attr-media-autoplay-2><a href=#attr-media-autoplay>autoplay</a></code>,
  <code id=the-audio-element:attr-media-loop-2><a href=#attr-media-loop>loop</a></code>, <code id=the-audio-element:attr-media-muted-2><a href=#attr-media-muted>muted</a></code>, and <code id=the-audio-element:attr-media-controls-4><a href=#attr-media-controls>controls</a></code> attributes are <a href=#media-element-attributes id=the-audio-element:media-element-attributes>the attributes common to all media elements</a>.</p>

  <dl class=domintro><dt><code><var>audio</var> = new <a href=#dom-audio id=dom-audio-dev>Audio</a>([ <var>url</var> ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio title="The Audio() constructor creates and returns a new HTMLAudioElement which can be either attached to a document for the user to interact with and/or listen to, or can be used offscreen to manage and play audio.">HTMLAudioElement/Audio</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns a new <code id=the-audio-element:the-audio-element-7><a href=#the-audio-element>audio</a></code> element, with the <code id=the-audio-element:attr-media-src-5><a href=#attr-media-src>src</a></code>
    attribute set to the value passed in the argument, if applicable.</p>
   </dl>

  

  <p>A legacy factory function is provided for creating <code id=the-audio-element:htmlaudioelement><a href=#htmlaudioelement>HTMLAudioElement</a></code> objects (in
  addition to the factory methods from DOM such as <code id=the-audio-element:dom-document-createelement><a data-x-internal=dom-document-createelement href=https://dom.spec.whatwg.org/#dom-document-createelement>createElement()</a></code>): <dfn id=dom-audio><code>Audio(<var>src</var>)</code></dfn>. When invoked, the legacy factory function
  must perform the following steps:</p>

  <ol><li><p>Let <var>document</var> be the <a id=the-audio-element:current-global-object href=webappapis.html#current-global-object>current global object</a>'s <a href=nav-history-apis.html#concept-document-window id=the-audio-element:concept-document-window>associated <code>Document</code></a>.<li><p>Let <var>audio</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-create-element id=the-audio-element:create-an-element data-x-internal=create-an-element>creating an
   element</a> given <var>document</var>, "<code>audio</code>", and the <a id=the-audio-element:html-namespace-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML
   namespace</a>.<li><p><a href=https://dom.spec.whatwg.org/#concept-element-attributes-set-value id=the-audio-element:concept-element-attributes-set-value data-x-internal=concept-element-attributes-set-value>Set an attribute value</a> for
   <var>audio</var> using "<code id=the-audio-element:attr-media-preload-3><a href=#attr-media-preload>preload</a></code>" and "<code id=the-audio-element:attr-media-preload-auto><a href=#attr-media-preload-auto>auto</a></code>".<li><p>If <var>src</var> is given, then <a href=https://dom.spec.whatwg.org/#concept-element-attributes-set-value id=the-audio-element:concept-element-attributes-set-value-2 data-x-internal=concept-element-attributes-set-value>set
   an attribute value</a> for <var>audio</var> using "<code id=the-audio-element:attr-media-src-6><a href=#attr-media-src>src</a></code>"
   and <var>src</var>. (This will <a href=#concept-media-load-algorithm-at-creation>cause the user
   agent to invoke</a> the object's <a href=#concept-media-load-algorithm id=the-audio-element:concept-media-load-algorithm>resource selection
   algorithm</a> before returning.)<li><p>Return <var>audio</var>.</ol>

  



  



  <h4 id=the-track-element><span class=secno>4.8.10</span> The <dfn data-dfn-type=element><code>track</code></dfn> element<a href=#the-track-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track title="The <track> HTML element is used as a child of the media elements, <audio> and <video>. It lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. The tracks are formatted in WebVTT format (.vtt files) — Web Video Text Tracks.">Element/track</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>25+</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLTrackElement title="The HTMLTrackElement interface represents an HTML <track> element within the DOM. This element can be used as a child of either <audio> or <video> to specify a text track containing information such as closed captions or subtitles.">HTMLTrackElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLTrackElement/src title="The HTMLTrackElement.src property reflects the value of the <track> element's src attribute, which indicates the URL of the text track's data.">HTMLTrackElement/src</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-track-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-track-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a child of a <a href=#media-element id=the-track-element:media-element>media element</a>, before any <a id=the-track-element:flow-content-2 href=dom.html#flow-content-2>flow content</a>.<dt><a href=dom.html#concept-element-content-model id=the-track-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-track-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-track-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-track-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-track-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-track-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-track-element:attr-track-kind><a href=#attr-track-kind>kind</a></code> —  The type of text track
     <dd><code id=the-track-element:attr-track-src><a href=#attr-track-src>src</a></code> —  Address of the resource
     <dd><code id=the-track-element:attr-track-srclang><a href=#attr-track-srclang>srclang</a></code> —  Language of the text track
     <dd><code id=the-track-element:attr-track-label><a href=#attr-track-label>label</a></code> —  User-visible label
     <dd><code id=the-track-element:attr-track-default><a href=#attr-track-default>default</a></code> —  Enable the track if no other <a href=#text-track id=the-track-element:text-track>text track</a> is more suitable
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-track-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-track>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-track>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-track-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmltrackelement' data-dfn-type='interface'><c- g>HTMLTrackElement</c-></dfn> : <a id='the-track-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-track-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-track-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-track-kind' id='the-track-element:dom-track-kind'><c- g>kind</c-></a>;
  [<a id='the-track-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflecturl' id='the-track-element:xattr-reflecturl'><c- g>ReflectURL</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <dfn data-dfn-for='HTMLTrackElement' id='dom-track-src' data-dfn-type='attribute'><c- g>src</c-></dfn>;
  [<a id='the-track-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-track-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLTrackElement' id='dom-track-srclang' data-dfn-type='attribute'><c- g>srclang</c-></dfn>;
  [<a id='the-track-element:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-track-element:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLTrackElement' id='dom-track-label' data-dfn-type='attribute'><c- g>label</c-></dfn>;
  [<a id='the-track-element:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-track-element:xattr-reflect-3'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLTrackElement' id='dom-track-default' data-dfn-type='attribute'><c- g>default</c-></dfn>;

  <c- b>const</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-track-none' id='the-track-element:dom-track-none'><c- g>NONE</c-></a> = 0;
  <c- b>const</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-track-loading' id='the-track-element:dom-track-loading'><c- g>LOADING</c-></a> = 1;
  <c- b>const</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-track-loaded' id='the-track-element:dom-track-loaded'><c- g>LOADED</c-></a> = 2;
  <c- b>const</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-track-error' id='the-track-element:dom-track-error'><c- g>ERROR</c-></a> = 3;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-track-readystate' id='the-track-element:dom-track-readystate'><c- g>readyState</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a href='#texttrack' id='the-track-element:texttrack'><c- n>TextTrack</c-></a> <a href='#dom-track-track' id='the-track-element:dom-track-track'><c- g>track</c-></a>;
};</code></pre>
   </dl>

  <p>The <code id=the-track-element:the-track-element><a href=#the-track-element>track</a></code> element allows authors to specify explicit external timed <a href=#text-track id=the-track-element:text-track-2>text tracks</a> for <a href=#media-element id=the-track-element:media-element-2>media elements</a>. It
  does not <a href=dom.html#represents id=the-track-element:represents>represent</a> anything on its own.</p>

  <p>The <dfn data-dfn-for=track id=attr-track-kind data-dfn-type=element-attr><code>kind</code></dfn> attribute is
  an <a id=the-track-element:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=track/kind id=attr-track-kind-keyword-subtitles data-dfn-type=attr-value><code>subtitles</code></dfn>
     <td><dfn id=attr-track-kind-subtitles>Subtitles</dfn>
     <td>
      Transcription or translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the <a href=#media-resource id=the-track-element:media-resource>media resource</a>'s audio track).
      Overlaid on the video.
    <tr><td><dfn data-dfn-for=track/kind id=attr-track-kind-keyword-captions data-dfn-type=attr-value><code>captions</code></dfn>
     <td><dfn id=attr-track-kind-captions>Captions</dfn>
     <td>
      Transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible (e.g. because it is muted, drowned-out by ambient noise, or because the user is deaf).
      Overlaid on the video; labeled as appropriate for the hard-of-hearing.
    <tr><td><dfn data-dfn-for=track/kind id=attr-track-kind-keyword-descriptions data-dfn-type=attr-value><code>descriptions</code></dfn>
     <td><dfn id=attr-track-kind-descriptions>Descriptions</dfn>
     <td>
      Textual descriptions of the video component of the <a href=#media-resource id=the-track-element:media-resource-2>media resource</a>, intended for audio synthesis when the visual component is obscured, unavailable, or not usable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind).
      Synthesized as audio.
    <tr><td><dfn data-dfn-for=track/kind id=attr-track-kind-keyword-chapters data-dfn-type=attr-value><code>chapters</code></dfn>
     <td><dfn id=attr-track-kind-chapters>Chapters metadata</dfn>
     <td rowspan=2>
      Tracks intended for use from script.
      Not displayed by the user agent.
    <tr><td><dfn data-dfn-for=track/kind id=attr-track-kind-keyword-metadata data-dfn-type=attr-value><code>metadata</code></dfn>
     <td><dfn id=attr-track-kind-metadata>Metadata</dfn>
  </table>

  <p>The attribute's <i id=the-track-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> is the <a href=#attr-track-kind-subtitles id=the-track-element:attr-track-kind-subtitles>subtitles</a> state, and its <i id=the-track-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> is the <a href=#attr-track-kind-metadata id=the-track-element:attr-track-kind-metadata>metadata</a>
  state.</p>

  <p>The <dfn data-dfn-for=track id=attr-track-src data-dfn-type=element-attr><code>src</code></dfn> attribute
  gives the <a id=the-track-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the text track data. The value must be a <a id=the-track-element:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL
  potentially surrounded by spaces</a>. This attribute must be present.</p>

  

  <p>The element has an associated <dfn id=track-url>track URL</dfn> (a string), initially the empty string.</p>

  <p>When the element's <code id=the-track-element:attr-track-src-2><a href=#attr-track-src>src</a></code> attribute is set, run these steps:

  <ol><li><p>Let <var>trackURL</var> be failure.<li><p>Let <var>value</var> be the element's <code id=the-track-element:attr-track-src-3><a href=#attr-track-src>src</a></code> attribute
   value.<li><p>If <var>value</var> is not the empty string, then set <var>trackURL</var> to the result of
   <a id=the-track-element:encoding-parsing-and-serializing-a-url href=urls-and-fetching.html#encoding-parsing-and-serializing-a-url>encoding-parsing-and-serializing a URL</a> given <var>value</var>, relative to the
   element's <a id=the-track-element:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>Set the element's <a href=#track-url id=the-track-element:track-url>track URL</a> to <var>trackURL</var> if it is not failure;
   otherwise to the empty string.</ol>

  

  <p>If the element's <a href=#track-url id=the-track-element:track-url-2>track URL</a> identifies a WebVTT resource, and the element's <code id=the-track-element:attr-track-kind-2><a href=#attr-track-kind>kind</a></code> attribute is not in the <a href=#attr-track-kind-chapters id=the-track-element:attr-track-kind-chapters>chapters metadata</a> or <a href=#attr-track-kind-metadata id=the-track-element:attr-track-kind-metadata-2>metadata</a> state, then the WebVTT file must be a
  <a id=the-track-element:webvtt-file-using-cue-text href=https://w3c.github.io/webvtt/#webvtt-file-using-cue-text data-x-internal=webvtt-file-using-cue-text>WebVTT file using cue text</a>. <a href=references.html#refsWEBVTT>[WEBVTT]</a></p>

  <p>The <dfn data-dfn-for=track id=attr-track-srclang data-dfn-type=element-attr><code>srclang</code></dfn>
  attribute gives the language of the text track data. The value must be a valid BCP 47 language
  tag. This attribute must be present if the element's <code id=the-track-element:attr-track-kind-3><a href=#attr-track-kind>kind</a></code>
  attribute is in the <a href=#attr-track-kind-subtitles id=the-track-element:attr-track-kind-subtitles-2>subtitles</a> state.
  <a href=references.html#refsBCP47>[BCP47]</a></p>

  

  <p>If the element has a <code id=the-track-element:attr-track-srclang-2><a href=#attr-track-srclang>srclang</a></code> attribute whose value is
  not the empty string, then the element's <dfn id=track-language>track language</dfn> is the value of the attribute.
  Otherwise, the element has no <a href=#track-language id=the-track-element:track-language>track language</a>.</p>

  

  <p>The <dfn data-dfn-for=track id=attr-track-label data-dfn-type=element-attr><code>label</code></dfn> attribute
  gives a user-readable title for the track. This title is used by user agents when listing <a href=#attr-track-kind-subtitles id=the-track-element:attr-track-kind-subtitles-3>subtitle</a>, <a href=#attr-track-kind-captions id=the-track-element:attr-track-kind-captions>caption</a>, and <a href=#attr-track-kind-descriptions id=the-track-element:attr-track-kind-descriptions>audio description</a> tracks in their user interface.</p>

  <p>The value of the <code id=the-track-element:attr-track-label-2><a href=#attr-track-label>label</a></code> attribute, if the attribute is
  present, must not be the empty string. Furthermore, there must not be two <code id=the-track-element:the-track-element-2><a href=#the-track-element>track</a></code>
  element children of the same <a href=#media-element id=the-track-element:media-element-3>media element</a> whose <code id=the-track-element:attr-track-kind-4><a href=#attr-track-kind>kind</a></code> attributes are in the same state, whose <code id=the-track-element:attr-track-srclang-3><a href=#attr-track-srclang>srclang</a></code> attributes are both missing or have values that
  represent the same language, and whose <code id=the-track-element:attr-track-label-3><a href=#attr-track-label>label</a></code> attributes are
  again both missing or both have the same value.</p>

  

  <p>If the element has a <code id=the-track-element:attr-track-label-4><a href=#attr-track-label>label</a></code> attribute whose value is not
  the empty string, then the element's <dfn id=track-label>track label</dfn> is the value of the attribute.
  Otherwise, the element's <a href=#track-label id=the-track-element:track-label>track label</a> is an empty string.</p>

  

  <p>The <dfn data-dfn-for=track id=attr-track-default data-dfn-type=element-attr><code>default</code></dfn>
  attribute is a <a id=the-track-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>, which, if specified, indicates that the track is to
  be enabled if the user's preferences do not indicate that another track would be more
  appropriate.</p>

  <p>Each <a href=#media-element id=the-track-element:media-element-4>media element</a> must have no more than one <code id=the-track-element:the-track-element-3><a href=#the-track-element>track</a></code> element child
  whose <code id=the-track-element:attr-track-kind-5><a href=#attr-track-kind>kind</a></code> attribute is in the <a href=#attr-track-kind-subtitles id=the-track-element:attr-track-kind-subtitles-4>subtitles</a> or <a href=#attr-track-kind-captions id=the-track-element:attr-track-kind-captions-2>captions</a> state and whose <code id=the-track-element:attr-track-default-2><a href=#attr-track-default>default</a></code> attribute is specified.</p>

  <p>Each <a href=#media-element id=the-track-element:media-element-5>media element</a> must have no more than one <code id=the-track-element:the-track-element-4><a href=#the-track-element>track</a></code> element child
  whose <code id=the-track-element:attr-track-kind-6><a href=#attr-track-kind>kind</a></code> attribute is in the <a href=#attr-track-kind-descriptions id=the-track-element:attr-track-kind-descriptions-2>description</a> state and whose <code id=the-track-element:attr-track-default-3><a href=#attr-track-default>default</a></code> attribute is specified.</p>

  <p>Each <a href=#media-element id=the-track-element:media-element-6>media element</a> must have no more than one <code id=the-track-element:the-track-element-5><a href=#the-track-element>track</a></code> element child
  whose <code id=the-track-element:attr-track-kind-7><a href=#attr-track-kind>kind</a></code> attribute is in the <a href=#attr-track-kind-chapters id=the-track-element:attr-track-kind-chapters-2>chapters metadata</a> state and whose <code id=the-track-element:attr-track-default-4><a href=#attr-track-default>default</a></code> attribute is specified.</p>

  <p class=note>There is no limit on the number of <code id=the-track-element:the-track-element-6><a href=#the-track-element>track</a></code> elements whose <code id=the-track-element:attr-track-kind-8><a href=#attr-track-kind>kind</a></code> attribute is in the <a href=#attr-track-kind-metadata id=the-track-element:attr-track-kind-metadata-3>metadata</a> state and whose <code id=the-track-element:attr-track-default-5><a href=#attr-track-default>default</a></code> attribute is specified.</p>

  <dl class=domintro><dt><code><var>track</var>.<a href=#dom-track-readystate id=dom-track-readystate-dev>readyState</a></code><dd>
    <p>Returns the <a href=#text-track-readiness-state id=the-track-element:text-track-readiness-state>text track readiness state</a>, represented by a number from the
    following list:</p>
    <dl><dt><code><var>track</var>.<a href=#dom-track-none id=dom-track-none-dev>NONE</a> (0)</code><dd><p>The <a href=#text-track-not-loaded id=the-track-element:text-track-not-loaded>text track not loaded</a> state.<dt><code><var>track</var>.<a href=#dom-track-loading id=dom-track-loading-dev>LOADING</a> (1)</code><dd><p>The <a href=#text-track-loading id=the-track-element:text-track-loading>text track loading</a> state.<dt><code><var>track</var>.<a href=#dom-track-loaded id=dom-track-loaded-dev>LOADED</a> (2)</code><dd><p>The <a href=#text-track-loaded id=the-track-element:text-track-loaded>text track loaded</a> state.<dt><code><var>track</var>.<a href=#dom-track-error id=dom-track-error-dev>ERROR</a> (3)</code><dd><p>The <a href=#text-track-failed-to-load id=the-track-element:text-track-failed-to-load>text track failed to load</a> state.</dl>
   <dt><code><var>track</var>.<a href=#dom-track-track id=dom-track-track-dev>track</a></code><dd>
    <p>Returns the <code id=the-track-element:texttrack-2><a href=#texttrack>TextTrack</a></code> object corresponding to the <a href=#text-track id=the-track-element:text-track-3>text track</a> of the
    <code id=the-track-element:the-track-element-7><a href=#the-track-element>track</a></code> element.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLTrackElement id=dom-track-readystate data-dfn-type=attribute><code>readyState</code></dfn> attribute must return the numeric value
  corresponding to the <a href=#text-track-readiness-state id=the-track-element:text-track-readiness-state-2>text track readiness state</a> of the <code id=the-track-element:the-track-element-8><a href=#the-track-element>track</a></code> element's
  <a href=#text-track id=the-track-element:text-track-4>text track</a>, as defined by the following list:</p>

  <dl><dt><dfn data-dfn-for=HTMLTrackElement id=dom-track-none data-dfn-type=const><code>NONE</code></dfn> (numeric value 0)<dd>The <a href=#text-track-not-loaded id=the-track-element:text-track-not-loaded-2>text track not loaded</a> state.<dt><dfn data-dfn-for=HTMLTrackElement id=dom-track-loading data-dfn-type=const><code>LOADING</code></dfn> (numeric value 1)<dd>The <a href=#text-track-loading id=the-track-element:text-track-loading-2>text track loading</a> state.<dt><dfn data-dfn-for=HTMLTrackElement id=dom-track-loaded data-dfn-type=const><code>LOADED</code></dfn> (numeric value 2)<dd>The <a href=#text-track-loaded id=the-track-element:text-track-loaded-2>text track loaded</a> state.<dt><dfn data-dfn-for=HTMLTrackElement id=dom-track-error data-dfn-type=const><code>ERROR</code></dfn> (numeric value 3)<dd>The <a href=#text-track-failed-to-load id=the-track-element:text-track-failed-to-load-2>text track failed to load</a> state.</dl>

  <p>The <dfn data-dfn-for=HTMLTrackElement id=dom-track-track data-dfn-type=attribute><code>track</code></dfn> IDL
  attribute must, on getting, return the <code id=the-track-element:the-track-element-9><a href=#the-track-element>track</a></code> element's <a href=#text-track id=the-track-element:text-track-5>text track</a>'s
  corresponding <code id=the-track-element:texttrack-3><a href=#texttrack>TextTrack</a></code> object.</p>

  <p>The <dfn data-dfn-for=HTMLTrackElement id=dom-track-kind data-dfn-type=attribute><code>kind</code></dfn> IDL
  attribute must <a id=the-track-element:reflect href=common-dom-interfaces.html#reflect>reflect</a> the content attribute of the same name, <a id=the-track-element:limited-to-only-known-values href=common-dom-interfaces.html#limited-to-only-known-values>limited to only
  known values</a>.</p>

  

  <div class=example>

   <p>This video has subtitles in several languages:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>video</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;brave.webm&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>track</c-> <c- e>kind</c-><c- o>=</c-><c- s>subtitles</c-> <c- e>src</c-><c- o>=</c-><c- s>brave.en.vtt</c-> <c- e>srclang</c-><c- o>=</c-><c- s>en</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;English&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>track</c-> <c- e>kind</c-><c- o>=</c-><c- s>captions</c-> <c- e>src</c-><c- o>=</c-><c- s>brave.en.hoh.vtt</c-> <c- e>srclang</c-><c- o>=</c-><c- s>en</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;English for the Hard of Hearing&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>track</c-> <c- e>kind</c-><c- o>=</c-><c- s>subtitles</c-> <c- e>src</c-><c- o>=</c-><c- s>brave.fr.vtt</c-> <c- e>srclang</c-><c- o>=</c-><c- s>fr</c-> <c- e>lang</c-><c- o>=</c-><c- s>fr</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Français&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>track</c-> <c- e>kind</c-><c- o>=</c-><c- s>subtitles</c-> <c- e>src</c-><c- o>=</c-><c- s>brave.de.vtt</c-> <c- e>srclang</c-><c- o>=</c-><c- s>de</c-> <c- e>lang</c-><c- o>=</c-><c- s>de</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;Deutsch&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>video</c-><c- p>&gt;</c-></code></pre>

   <p>(The <code id=the-track-element:attr-lang><a href=dom.html#attr-lang>lang</a></code> attributes on the last two describe the language of
   the <code id=the-track-element:attr-track-label-5><a href=#attr-track-label>label</a></code> attribute, not the language of the subtitles
   themselves. The language of the subtitles is given by the <code id=the-track-element:attr-track-srclang-4><a href=#attr-track-srclang>srclang</a></code> attribute.)</p>

  </div>

  <h4 id=media-elements><span class=secno>4.8.11</span> Media elements<a href=#media-elements class=self-link></a></h4>

  <p><a href=#htmlmediaelement id=media-elements:htmlmediaelement>HTMLMediaElement</a> objects (<code id=media-elements:the-audio-element><a href=#the-audio-element>audio</a></code> and <code id=media-elements:the-video-element><a href=#the-video-element>video</a></code>, in this
  specification) are simply known as <dfn id=media-element data-lt="media element" data-export="">media elements</dfn>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement title="The HTMLMediaElement interface adds to HTMLElement the properties and methods needed to support basic media-related capabilities that are common to audio and video.">HTMLMediaElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/src title="The HTMLMediaElement.src property reflects the value of the HTML media element's src attribute, which indicates the URL of a media resource to use in the element.">HTMLMediaElement/src</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/autoplay title="The HTMLMediaElement.autoplay property reflects the autoplay HTML attribute, indicating whether playback should automatically begin as soon as enough media is available to do so without interruption.">HTMLMediaElement/autoplay</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loop title="The HTMLMediaElement.loop property reflects the loop HTML attribute, which controls whether the media element should start over when it reaches the end.">HTMLMediaElement/loop</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>11+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controls title="The HTMLMediaElement.controls property reflects the controls HTML attribute, which controls whether user interface controls for playing the media item will be displayed.">HTMLMediaElement/controls</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultMuted title="The HTMLMediaElement.defaultMuted property reflects the muted HTML attribute, which indicates whether the media element's audio output should be muted by default. This property has no dynamic effect. To mute and unmute the audio output, use the muted property.">HTMLMediaElement/defaultMuted</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>11+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>15+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><pre><code class='idl'><c- b>enum</c-> <dfn id='canplaytyperesult' data-dfn-type='enum'><c- g>CanPlayTypeResult</c-></dfn> { <c- s>&quot;&quot;</c-> /* <a href='#dom-canplaytyperesult-nil' id='media-elements:dom-canplaytyperesult-nil'>empty string</a> */, <c- s>&quot;</c-><a href='#dom-canplaytyperesult-maybe' id='media-elements:dom-canplaytyperesult-maybe'><c- s>maybe</c-></a><c- s>&quot;</c->, <c- s>&quot;</c-><a href='#dom-canplaytyperesult-probably' id='media-elements:dom-canplaytyperesult-probably'><c- s>probably</c-></a><c- s>&quot;</c-> };
<c- b>typedef</c-> (<a id='media-elements:mediastream' href='https://w3c.github.io/mediacapture-main/getusermedia.html#idl-def-mediastream' data-x-internal='mediastream'><c- n>MediaStream</c-></a> <c- b>or</c-> <a id='media-elements:mediasource' href='https://w3c.github.io/media-source/#idl-def-mediasource' data-x-internal='mediasource'><c- n>MediaSource</c-></a> <c- b>or</c-> <a id='media-elements:blob' href='https://w3c.github.io/FileAPI/#dfn-Blob' data-x-internal='blob'><c- n>Blob</c-></a>) <dfn id='mediaprovider' data-dfn-type='typedef'><c- g>MediaProvider</c-></dfn>;

[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlmediaelement' data-dfn-type='interface'><c- g>HTMLMediaElement</c-></dfn> : <a id='media-elements:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {

  // error state
  <c- b>readonly</c-> <c- b>attribute</c-> <a href='#mediaerror' id='media-elements:mediaerror'><c- n>MediaError</c-></a>? <a href='#dom-media-error' id='media-elements:dom-media-error'><c- g>error</c-></a>;

  // network state
  [<a id='media-elements:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflecturl' id='media-elements:xattr-reflecturl'><c- g>ReflectURL</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <dfn data-dfn-for='HTMLMediaElement' id='dom-media-src' data-dfn-type='attribute'><c- g>src</c-></dfn>;
  <c- b>attribute</c-> <a href='#mediaprovider' id='media-elements:mediaprovider'><c- n>MediaProvider</c-></a>? <a href='#dom-media-srcobject' id='media-elements:dom-media-srcobject'><c- g>srcObject</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-media-currentsrc' id='media-elements:dom-media-currentsrc'><c- g>currentSrc</c-></a>;
  [<a id='media-elements:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c->? <a href='#dom-media-crossorigin' id='media-elements:dom-media-crossorigin'><c- g>crossOrigin</c-></a>;
  <c- b>const</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-media-network_empty' id='media-elements:dom-media-network_empty'><c- g>NETWORK_EMPTY</c-></a> = 0;
  <c- b>const</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-media-network_idle' id='media-elements:dom-media-network_idle'><c- g>NETWORK_IDLE</c-></a> = 1;
  <c- b>const</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-media-network_loading' id='media-elements:dom-media-network_loading'><c- g>NETWORK_LOADING</c-></a> = 2;
  <c- b>const</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-media-network_no_source' id='media-elements:dom-media-network_no_source'><c- g>NETWORK_NO_SOURCE</c-></a> = 3;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-media-networkstate' id='media-elements:dom-media-networkstate'><c- g>networkState</c-></a>;
  [<a id='media-elements:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-media-preload' id='media-elements:dom-media-preload'><c- g>preload</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a href='#timeranges' id='media-elements:timeranges'><c- n>TimeRanges</c-></a> <a href='#dom-media-buffered' id='media-elements:dom-media-buffered'><c- g>buffered</c-></a>;
  <c- b>undefined</c-> <a href='#dom-media-load' id='media-elements:dom-media-load'><c- g>load</c-></a>();
  <a href='#canplaytyperesult' id='media-elements:canplaytyperesult'><c- n>CanPlayTypeResult</c-></a> <a href='#dom-navigator-canplaytype' id='media-elements:dom-navigator-canplaytype'><c- g>canPlayType</c-></a>(<c- b>DOMString</c-> <c- g>type</c->);

  // ready state
  <c- b>const</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-media-have_nothing' id='media-elements:dom-media-have_nothing'><c- g>HAVE_NOTHING</c-></a> = 0;
  <c- b>const</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-media-have_metadata' id='media-elements:dom-media-have_metadata'><c- g>HAVE_METADATA</c-></a> = 1;
  <c- b>const</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-media-have_current_data' id='media-elements:dom-media-have_current_data'><c- g>HAVE_CURRENT_DATA</c-></a> = 2;
  <c- b>const</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-media-have_future_data' id='media-elements:dom-media-have_future_data'><c- g>HAVE_FUTURE_DATA</c-></a> = 3;
  <c- b>const</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-media-have_enough_data' id='media-elements:dom-media-have_enough_data'><c- g>HAVE_ENOUGH_DATA</c-></a> = 4;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-media-readystate' id='media-elements:dom-media-readystate'><c- g>readyState</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-media-seeking' id='media-elements:dom-media-seeking'><c- g>seeking</c-></a>;

  // playback state
  <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-media-currenttime' id='media-elements:dom-media-currenttime'><c- g>currentTime</c-></a>;
  <c- b>undefined</c-> <a href='#dom-media-fastseek' id='media-elements:dom-media-fastseek'><c- g>fastSeek</c-></a>(<c- b>double</c-> <c- g>time</c->);
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unrestricted</c-> <c- b>double</c-> <a href='#dom-media-duration' id='media-elements:dom-media-duration'><c- g>duration</c-></a>;
  <a href='https://webidl.spec.whatwg.org/#idl-object' id='media-elements:idl-object' data-x-internal='idl-object'><c- b>object</c-></a> <a href='#dom-media-getstartdate' id='media-elements:dom-media-getstartdate'><c- g>getStartDate</c-></a>();
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-media-paused' id='media-elements:dom-media-paused'><c- g>paused</c-></a>;
  <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-media-defaultplaybackrate' id='media-elements:dom-media-defaultplaybackrate'><c- g>defaultPlaybackRate</c-></a>;
  <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-media-playbackrate' id='media-elements:dom-media-playbackrate'><c- g>playbackRate</c-></a>;
  <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-media-preservespitch' id='media-elements:dom-media-preservespitch'><c- g>preservesPitch</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a href='#timeranges' id='media-elements:timeranges-2'><c- n>TimeRanges</c-></a> <a href='#dom-media-played' id='media-elements:dom-media-played'><c- g>played</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a href='#timeranges' id='media-elements:timeranges-3'><c- n>TimeRanges</c-></a> <a href='#dom-media-seekable' id='media-elements:dom-media-seekable'><c- g>seekable</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-media-ended' id='media-elements:dom-media-ended'><c- g>ended</c-></a>;
  [<a id='media-elements:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='media-elements:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLMediaElement' id='dom-media-autoplay' data-dfn-type='attribute'><c- g>autoplay</c-></dfn>;
  [<a id='media-elements:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='media-elements:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLMediaElement' id='dom-media-loop' data-dfn-type='attribute'><c- g>loop</c-></dfn>;
  <a href='https://webidl.spec.whatwg.org/#idl-promise' id='media-elements:idl-promise' data-x-internal='idl-promise'><c- b>Promise</c-></a>&lt;<c- b>undefined</c->&gt; <a href='#dom-media-play' id='media-elements:dom-media-play'><c- g>play</c-></a>();
  <c- b>undefined</c-> <a href='#dom-media-pause' id='media-elements:dom-media-pause'><c- g>pause</c-></a>();

  // controls
  [<a id='media-elements:cereactions-6' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='media-elements:xattr-reflect-3'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLMediaElement' id='dom-media-controls' data-dfn-type='attribute'><c- g>controls</c-></dfn>;
  <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-media-volume' id='media-elements:dom-media-volume'><c- g>volume</c-></a>;
  <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-media-muted' id='media-elements:dom-media-muted'><c- g>muted</c-></a>;
  [<a id='media-elements:cereactions-7' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='media-elements:xattr-reflect-4'>Reflect</a>=&quot;<a href='#attr-media-muted' id='media-elements:attr-media-muted'>muted</a>&quot;] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLMediaElement' id='dom-media-defaultmuted' data-dfn-type='attribute'><c- g>defaultMuted</c-></dfn>;

  // tracks
  [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <a href='#audiotracklist' id='media-elements:audiotracklist'><c- n>AudioTrackList</c-></a> <a href='#dom-media-audiotracks' id='media-elements:dom-media-audiotracks'><c- g>audioTracks</c-></a>;
  [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <a href='#videotracklist' id='media-elements:videotracklist'><c- n>VideoTrackList</c-></a> <a href='#dom-media-videotracks' id='media-elements:dom-media-videotracks'><c- g>videoTracks</c-></a>;
  [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <a href='#texttracklist' id='media-elements:texttracklist'><c- n>TextTrackList</c-></a> <a href='#dom-media-texttracks' id='media-elements:dom-media-texttracks'><c- g>textTracks</c-></a>;
  <a href='#texttrack' id='media-elements:texttrack'><c- n>TextTrack</c-></a> <a href='#dom-media-addtexttrack' id='media-elements:dom-media-addtexttrack'><c- g>addTextTrack</c-></a>(<a href='#texttrackkind' id='media-elements:texttrackkind'><c- n>TextTrackKind</c-></a> <c- g>kind</c->, <c- b>optional</c-> <c- b>DOMString</c-> <c- g>label</c-> = &quot;&quot;, <c- b>optional</c-> <c- b>DOMString</c-> <c- g>language</c-> = &quot;&quot;);
};</code></pre>

  <p>The <dfn id=media-element-attributes>media element attributes</dfn>, <code id=media-elements:attr-media-src><a href=#attr-media-src>src</a></code>, <code id=media-elements:attr-media-crossorigin><a href=#attr-media-crossorigin>crossorigin</a></code>, <code id=media-elements:attr-media-preload><a href=#attr-media-preload>preload</a></code>, <code id=media-elements:attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code>,
  <code id=media-elements:attr-media-loop><a href=#attr-media-loop>loop</a></code>, <code id=media-elements:attr-media-muted-2><a href=#attr-media-muted>muted</a></code>, and
  <code id=media-elements:attr-media-controls><a href=#attr-media-controls>controls</a></code>, apply to all <a href=#media-element id=media-elements:media-element>media elements</a>. They are defined in this section.</p>

  

  <p><a href=#media-element id=media-elements:media-element-2>Media elements</a> are used to present audio data, or video and
  audio data, to the user. This is referred to as <dfn data-dfn-for=HTMLMediaElement id=media-data data-export="">media data</dfn>
  in this section, since this section applies equally to <a href=#media-element id=media-elements:media-element-3>media
  elements</a> for audio or for video.

  The term <dfn id=media-resource>media resource</dfn> is used to refer to the complete set of media data, e.g. the
  complete video file, or complete audio file.

  </p>

  <p>A <a href=#media-resource id=media-elements:media-resource>media resource</a> has an associated
  <dfn id=media-resource-origin>origin</dfn>, which is either "<code>none</code>",
  "<code>multiple</code>", "<code>rewritten</code>", or an
  <a id=media-elements:concept-origin href=browsers.html#concept-origin>origin</a>. It is initially set to "<code>none</code>".</p>

  <p>A <a href=#media-resource id=media-elements:media-resource-2>media resource</a> can have multiple audio and video tracks. For the purposes of a
  <a href=#media-element id=media-elements:media-element-4>media element</a>, the video data of the <a href=#media-resource id=media-elements:media-resource-3>media resource</a> is only that of the
  currently selected track (if any) as given by the element's <code id=media-elements:dom-media-videotracks-2><a href=#dom-media-videotracks>videoTracks</a></code> attribute when the <a id=media-elements:event-loop href=webappapis.html#event-loop>event loop</a> last
  reached <a href=webappapis.html#step1>step 1</a>, and the audio data of the <a href=#media-resource id=media-elements:media-resource-4>media resource</a> is the result of mixing all
  the currently enabled tracks (if any) given by the element's <code id=media-elements:dom-media-audiotracks-2><a href=#dom-media-audiotracks>audioTracks</a></code> attribute when the <a id=media-elements:event-loop-2 href=webappapis.html#event-loop>event loop</a> last
  reached <a href=webappapis.html#step1>step 1</a>.</p>

  <p class=note>Both <code id=media-elements:the-audio-element-2><a href=#the-audio-element>audio</a></code> and <code id=media-elements:the-video-element-2><a href=#the-video-element>video</a></code> elements can be used for both audio
  and video. The main difference between the two is simply that the <code id=media-elements:the-audio-element-3><a href=#the-audio-element>audio</a></code> element has
  no playback area for visual content (such as video or captions), whereas the <code id=media-elements:the-video-element-3><a href=#the-video-element>video</a></code>
  element does.</p>

  

  <p>Each <a href=#media-element id=media-elements:media-element-5>media element</a> has a unique <dfn id=media-element-event-task-source>media element event task source</dfn>.</p>

  <p>To <dfn id=queue-a-media-element-task data-export="">queue a media element task</dfn> with a <a href=#media-element id=media-elements:media-element-6>media element</a>
  <var>element</var> and a series of steps <var>steps</var>, <a id=media-elements:queue-an-element-task href=webappapis.html#queue-an-element-task>queue an element task</a> on
  the <a href=#media-element id=media-elements:media-element-7>media element</a>'s <a href=#media-element-event-task-source id=media-elements:media-element-event-task-source>media element event task source</a> given
  <var>element</var> and <var>steps</var>.</p>

  



  <h5 id=error-codes><span class=secno>4.8.11.1</span> Error codes<a href=#error-codes class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/MediaError title="The MediaError interface represents an error which occurred while handling media in an HTML media element based on HTMLMediaElement, such as <audio> or <video>.">MediaError</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-media-error id=dom-media-error-dev>error</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error title="The HTMLMediaElement.error property is the MediaError object for the most recent error, or null if there has not been an error. When an error event is received by the element, you can determine details about what happened by examining this object.">HTMLMediaElement/error</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns a <code id=error-codes:mediaerror><a href=#mediaerror>MediaError</a></code> object representing the current error state of the
    element.</p>

    <p>Returns null if there is no error.</p>
   </dl>

  

  <p>All <a href=#media-element id=error-codes:media-element>media elements</a> have an associated error status, which
  records the last error the element encountered since its <a href=#concept-media-load-algorithm id=error-codes:concept-media-load-algorithm>resource selection algorithm</a> was last invoked. The
  <dfn data-dfn-for=HTMLMediaElement id=dom-media-error data-dfn-type=attribute><code>error</code></dfn> attribute,
  on getting, must return the <code id=error-codes:mediaerror-2><a href=#mediaerror>MediaError</a></code> object created for this last error, or null if
  there has not been an error.</p>

  

  <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='mediaerror' data-dfn-type='interface'><c- g>MediaError</c-></dfn> {
  <c- b>const</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-mediaerror-media_err_aborted' id='error-codes:dom-mediaerror-media_err_aborted'><c- g>MEDIA_ERR_ABORTED</c-></a> = 1;
  <c- b>const</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-mediaerror-media_err_network' id='error-codes:dom-mediaerror-media_err_network'><c- g>MEDIA_ERR_NETWORK</c-></a> = 2;
  <c- b>const</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-mediaerror-media_err_decode' id='error-codes:dom-mediaerror-media_err_decode'><c- g>MEDIA_ERR_DECODE</c-></a> = 3;
  <c- b>const</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-mediaerror-media_err_src_not_supported' id='error-codes:dom-mediaerror-media_err_src_not_supported'><c- g>MEDIA_ERR_SRC_NOT_SUPPORTED</c-></a> = 4;

  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>short</c-> <a href='#dom-mediaerror-code' id='error-codes:dom-mediaerror-code'><c- g>code</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-mediaerror-message' id='error-codes:dom-mediaerror-message'><c- g>message</c-></a>;
};</code></pre>

  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-media-error id=error-codes:dom-media-error>error</a>.<a href=#dom-mediaerror-code id=dom-mediaerror-code-dev>code</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/MediaError/code title="The read-only property MediaError.code returns a numeric value which represents the kind of error that occurred on a media element. To get a text string with specific diagnostic information, see MediaError.message.">MediaError/code</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Returns the current error's error code, from the list below.<dt><code><var>media</var>.<a href=#dom-media-error id=error-codes:dom-media-error-2>error</a>.<a href=#dom-mediaerror-message id=dom-mediaerror-message-dev>message</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/MediaError/message title="The read-only property MediaError.message returns a human-readable string offering specific diagnostic details related to the error described by the MediaError object, or an empty string (&quot;&quot;) if no diagnostic information can be determined or provided.">MediaError/message</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>52+</span></span><span class="safari yes"><span>Safari</span><span>15+</span></span><span class="chrome yes"><span>Chrome</span><span>59+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns a specific informative diagnostic message about the error condition encountered. The
    message and message format are not generally uniform across different user agents. If no such
    message is available, then the empty string is returned.</p>
   </dl>

  

  <p>Every <code id=error-codes:mediaerror-3><a href=#mediaerror>MediaError</a></code> object has a <dfn id=concept-mediaerror-message>message</dfn>, which is a string, and a <dfn id=concept-mediaerror-code>code</dfn>, which is one of the following:</p>

  

  <dl><dt><dfn data-dfn-for=MediaError id=dom-mediaerror-media_err_aborted data-dfn-type=const><code>MEDIA_ERR_ABORTED</code></dfn> (numeric value 1)<dd>The fetching process for the <a href=#media-resource id=error-codes:media-resource>media resource</a> was aborted by the user agent at the
   user's request.<dt><dfn data-dfn-for=MediaError id=dom-mediaerror-media_err_network data-dfn-type=const><code>MEDIA_ERR_NETWORK</code></dfn> (numeric value 2)<dd>A network error of some description caused the user agent to stop fetching the <a href=#media-resource id=error-codes:media-resource-2>media
   resource</a>, after the resource was established to be usable.<dt><dfn data-dfn-for=MediaError id=dom-mediaerror-media_err_decode data-dfn-type=const><code>MEDIA_ERR_DECODE</code></dfn> (numeric value 3)<dd>An error of some description occurred while decoding the <a href=#media-resource id=error-codes:media-resource-3>media resource</a>, after
   the resource was established to be usable.<dt><dfn data-dfn-for=MediaError id=dom-mediaerror-media_err_src_not_supported data-dfn-type=const><code>MEDIA_ERR_SRC_NOT_SUPPORTED</code></dfn> (numeric value 4)<dd>The <a href=#media-resource id=error-codes:media-resource-4>media resource</a> indicated by the <code id=error-codes:attr-media-src><a href=#attr-media-src>src</a></code>
   attribute or <a href=#assigned-media-provider-object id=error-codes:assigned-media-provider-object>assigned media provider object</a> was not suitable.</dl>

  

  <p>To <dfn id=creating-a-mediaerror data-export="">create a <code>MediaError</code></dfn>, given an
  error code which is one of the above values, return a new <code id=error-codes:mediaerror-4><a href=#mediaerror>MediaError</a></code> object whose
  <a href=#concept-mediaerror-code id=error-codes:concept-mediaerror-code>code</a> is the given error code and whose <a href=#concept-mediaerror-message id=error-codes:concept-mediaerror-message>message</a> is a string containing any details the user
  agent is able to supply about the cause of the error condition, or the empty string if the user
  agent is unable to supply such details. This message string must not contain only the information
  already available via the supplied error code; for example, it must not simply be a translation of
  the code into a string format. If no additional information is available beyond that provided by
  the error code, the <a href=#concept-mediaerror-message id=error-codes:concept-mediaerror-message-2>message</a> must be set to the
  empty string.</p>

  <p>The <dfn data-dfn-for=MediaError id=dom-mediaerror-code data-dfn-type=attribute><code>code</code></dfn>
  getter steps are to return <a id=error-codes:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-mediaerror-code id=error-codes:concept-mediaerror-code-2>code</a>.</p>

  <p>The <dfn data-dfn-for=MediaError id=dom-mediaerror-message data-dfn-type=attribute><code>message</code></dfn>
  getter steps are to return <a id=error-codes:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-mediaerror-message id=error-codes:concept-mediaerror-message-3>message</a>.</p>

  




  <h5 id=location-of-the-media-resource><span class=secno>4.8.11.2</span> Location of the media resource<a href=#location-of-the-media-resource class=self-link></a></h5>

  <p>The <dfn data-dfn-for=audio,video id=attr-media-src data-dfn-type=element-attr><code>src</code></dfn> content
  attribute on <a href=#media-element id=location-of-the-media-resource:media-element>media elements</a> gives the <a id=location-of-the-media-resource:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the
  media resource (video, audio) to show. The attribute, if present, must contain a <a id=location-of-the-media-resource:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid
  non-empty URL potentially surrounded by spaces</a>.</p>

  <p>If the <code id=location-of-the-media-resource:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is specified on the <a href=#media-element id=location-of-the-media-resource:media-element-2>media
  element</a>, then the <code id=location-of-the-media-resource:attr-media-src><a href=#attr-media-src>src</a></code> attribute must also be
  specified.</p>

  <p>The <dfn data-dfn-for=audio,video id=attr-media-crossorigin data-dfn-type=element-attr><code>crossorigin</code></dfn> content attribute on <a href=#media-element id=location-of-the-media-resource:media-element-3>media elements</a> is a <a id=location-of-the-media-resource:cors-settings-attribute href=urls-and-fetching.html#cors-settings-attribute>CORS settings attribute</a>.</p>

  

  <p id=concept-media-load-algorithm-at-creation>If a <a href=#media-element id=location-of-the-media-resource:media-element-4>media element</a> is created with a
  <code id=location-of-the-media-resource:attr-media-src-2><a href=#attr-media-src>src</a></code> attribute, the user agent must <a id=location-of-the-media-resource:immediately href=infrastructure.html#immediately>immediately</a> invoke the
  <a href=#media-element id=location-of-the-media-resource:media-element-5>media element</a>'s <a href=#concept-media-load-algorithm id=location-of-the-media-resource:concept-media-load-algorithm>resource selection
  algorithm</a>.</p>

  <p>If a <code id=location-of-the-media-resource:attr-media-src-3><a href=#attr-media-src>src</a></code> attribute of a <a href=#media-element id=location-of-the-media-resource:media-element-6>media element</a> is set
  or changed, the user agent must invoke the <a href=#media-element id=location-of-the-media-resource:media-element-7>media element</a>'s <a href=#media-element-load-algorithm id=location-of-the-media-resource:media-element-load-algorithm>media element load
  algorithm</a>. (<em>Removing</em> the <code id=location-of-the-media-resource:attr-media-src-4><a href=#attr-media-src>src</a></code> attribute does
  not do this, even if there are <code id=location-of-the-media-resource:the-source-element><a href=embedded-content.html#the-source-element>source</a></code> elements present.)</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/crossOrigin title="The HTMLMediaElement.crossOrigin property is the CORS setting for this media element. See CORS settings attributes for details.">HTMLMediaElement/crossOrigin</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>22+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>33+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>13+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-crossorigin data-dfn-type=attribute><code>crossOrigin</code></dfn> IDL attribute must <a id=location-of-the-media-resource:reflect href=common-dom-interfaces.html#reflect>reflect</a>
  the <code id=location-of-the-media-resource:attr-media-crossorigin><a href=#attr-media-crossorigin>crossorigin</a></code> content attribute, <a id=location-of-the-media-resource:limited-to-only-known-values href=common-dom-interfaces.html#limited-to-only-known-values>limited to
  only known values</a>.</p>

  

  <p>A <dfn id=media-provider-object>media provider object</dfn> is an object that can represent a <a href=#media-resource id=location-of-the-media-resource:media-resource>media
  resource</a>, separate from a <a id=location-of-the-media-resource:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>. <code id=location-of-the-media-resource:mediastream><a data-x-internal=mediastream href=https://w3c.github.io/mediacapture-main/getusermedia.html#idl-def-mediastream>MediaStream</a></code> objects,
  <code id=location-of-the-media-resource:mediasource><a data-x-internal=mediasource href=https://w3c.github.io/media-source/#idl-def-mediasource>MediaSource</a></code> objects, and <code id=location-of-the-media-resource:blob><a data-x-internal=blob href=https://w3c.github.io/FileAPI/#dfn-Blob>Blob</a></code> objects are all <a href=#media-provider-object id=location-of-the-media-resource:media-provider-object>media provider objects</a>.</p>

  

  <p>Each <a href=#media-element id=location-of-the-media-resource:media-element-8>media element</a> can have an <dfn id=assigned-media-provider-object>assigned media provider object</dfn>, which is a
  <a href=#media-provider-object id=location-of-the-media-resource:media-provider-object-2>media provider object</a>. When a <a href=#media-element id=location-of-the-media-resource:media-element-9>media element</a> is created, it has no
  <a href=#assigned-media-provider-object id=location-of-the-media-resource:assigned-media-provider-object>assigned media provider object</a>.</p>

  

  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-media-srcobject id=dom-media-srcobject-dev>srcObject</a> [ = <var>source</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in one engine only." class=less-than-two-engines-flag>⚠</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject title="The srcObject property of the HTMLMediaElement interface sets or returns the object which serves as the source of the media associated with the HTMLMediaElement.">HTMLMediaElement/srcObject</a><p class=less-than-two-engines-text>Support in one engine only.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Partial implementation.">🔰 42+</span></span><span class="safari yes"><span>Safari</span><span>11+</span></span><span class="chrome yes"><span>Chrome</span><span title="Partial implementation.">🔰 108+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Partial implementation.">🔰 108+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Allows the <a href=#media-element id=location-of-the-media-resource:media-element-10>media element</a> to be assigned a <a href=#media-provider-object id=location-of-the-media-resource:media-provider-object-3>media provider
    object</a>.</p>
   <dt><code><var>media</var>.<a href=#dom-media-currentsrc id=dom-media-currentsrc-dev>currentSrc</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentSrc title="The HTMLMediaElement.currentSrc property contains the absolute URL of the chosen media resource. This could happen, for example, if the web server selects a media file based on the resolution of the user's display. The value is an empty string if the networkState property is EMPTY.">HTMLMediaElement/currentSrc</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the <a id=location-of-the-media-resource:url-3 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the current <a href=#media-resource id=location-of-the-media-resource:media-resource-2>media resource</a>, if any.</p>

    <p>Returns the empty string when there is no <a href=#media-resource id=location-of-the-media-resource:media-resource-3>media resource</a>, or it doesn't have a
    <a id=location-of-the-media-resource:url-4 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-currentsrc data-dfn-type=attribute><code>currentSrc</code></dfn> IDL attribute must initially be set to the
  empty string. Its value is changed by the <a href=#concept-media-load-algorithm id=location-of-the-media-resource:concept-media-load-algorithm-2>resource
  selection algorithm</a> defined below.</p>

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-srcobject data-dfn-type=attribute><code>srcObject</code></dfn> IDL attribute, on getting, must return the
  element's <a href=#assigned-media-provider-object id=location-of-the-media-resource:assigned-media-provider-object-2>assigned media provider object</a>, if any, or null otherwise. On setting, it
  must set the element's <a href=#assigned-media-provider-object id=location-of-the-media-resource:assigned-media-provider-object-3>assigned media provider object</a> to the new value, and then
  invoke the element's <a href=#media-element-load-algorithm id=location-of-the-media-resource:media-element-load-algorithm-2>media element load algorithm</a>.</p>

  

  <p class=note>There are three ways to specify a <a href=#media-resource id=location-of-the-media-resource:media-resource-4>media resource</a>: the <code id=location-of-the-media-resource:dom-media-srcobject><a href=#dom-media-srcobject>srcObject</a></code> IDL attribute, the <code id=location-of-the-media-resource:attr-media-src-5><a href=#attr-media-src>src</a></code> content attribute, and <code id=location-of-the-media-resource:the-source-element-2><a href=embedded-content.html#the-source-element>source</a></code> elements. The IDL
  attribute takes priority, followed by the content attribute, followed by the elements.</p>



  <h5 id=mime-types><span class=secno>4.8.11.3</span> MIME types<a href=#mime-types class=self-link></a></h5>

  <p>A <a href=#media-resource id=mime-types:media-resource>media resource</a> can be described in terms of its <em>type</em>, specifically a
  <a id=mime-types:mime-type href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a>, in some cases with a <code>codecs</code> parameter. (Whether the
  <code>codecs</code> parameter is allowed or not depends on the MIME type.)
  <a href=references.html#refsRFC6381>[RFC6381]</a></p>

  <p>Types are usually somewhat incomplete descriptions; for example "<code>video/mpeg</code>" doesn't say anything except what the container type is, and even a
  type like "<code>video/mp4; codecs="avc1.42E01E, mp4a.40.2"</code>" doesn't
  include information like the actual bitrate (only the maximum bitrate). Thus, given a type, a user
  agent can often only know whether it <em>might</em> be able to play media of that type (with
  varying levels of confidence), or whether it definitely <em>cannot</em> play media of that
  type.</p>

  <p><dfn id=a-type-that-the-user-agent-knows-it-cannot-render>A type that the user agent knows it cannot render</dfn> is one that describes a resource
  that the user agent definitely does not support, for example because it doesn't recognize the
  container type, or it doesn't support the listed codecs.</p>

  <p>The <a id=mime-types:mime-type-2 href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> "<code id=mime-types:application/octet-stream><a data-x-internal=application/octet-stream href=https://www.rfc-editor.org/rfc/rfc2046#section-4.5.1>application/octet-stream</a></code>" with no parameters is never
  <a href=#a-type-that-the-user-agent-knows-it-cannot-render id=mime-types:a-type-that-the-user-agent-knows-it-cannot-render>a type that the user agent knows it cannot render</a>. User agents must treat that type
  as equivalent to the lack of any explicit <a href=urls-and-fetching.html#content-type id=mime-types:content-type>Content-Type metadata</a>
  when it is used to label a potential <a href=#media-resource id=mime-types:media-resource-2>media resource</a>.</p>

  <p class=note>Only the <a id=mime-types:mime-type-3 href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> "<code id=mime-types:application/octet-stream-2><a data-x-internal=application/octet-stream href=https://www.rfc-editor.org/rfc/rfc2046#section-4.5.1>application/octet-stream</a></code>" with no
  parameters is special-cased here; if any parameter appears with it, it will be treated just like
  any other <a id=mime-types:mime-type-4 href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a>. This is a deviation from the rule  that unknown <a id=mime-types:mime-type-5 href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> parameters should be
  ignored.</p> 

  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-navigator-canplaytype id=dom-navigator-canplaytype-dev>canPlayType</a>(<var>type</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType title="The HTMLMediaElement method canPlayType() reports how likely it is that the current browser will be able to play media of a given MIME type.">HTMLMediaElement/canPlayType</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the empty string (a negative response), "maybe", or "probably" based on how confident
    the user agent is that it can play media resources of the given type.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-navigator-canplaytype data-dfn-type=method><code>canPlayType(<var>type</var>)</code></dfn> method must return
  <dfn id=dom-canplaytyperesult-nil>the empty string</dfn> if <var>type</var> is <a href=#a-type-that-the-user-agent-knows-it-cannot-render id=mime-types:a-type-that-the-user-agent-knows-it-cannot-render-2>a type
  that the user agent knows it cannot render</a> or is the type
  "<code id=mime-types:application/octet-stream-3><a data-x-internal=application/octet-stream href=https://www.rfc-editor.org/rfc/rfc2046#section-4.5.1>application/octet-stream</a></code>"; it must return "<dfn data-dfn-for=CanPlayTypeResult id=dom-canplaytyperesult-probably data-dfn-type=enum-value><code>probably</code></dfn>" if
  the user agent is confident that the type represents a <a href=#media-resource id=mime-types:media-resource-3>media resource</a> that it can
  render if used in with this <code id=mime-types:the-audio-element><a href=#the-audio-element>audio</a></code> or <code id=mime-types:the-video-element><a href=#the-video-element>video</a></code> element; and it must return
  "<dfn data-dfn-for=CanPlayTypeResult id=dom-canplaytyperesult-maybe data-dfn-type=enum-value><code>maybe</code></dfn>" otherwise. Implementers are encouraged to
  return "<code id=mime-types:dom-canplaytyperesult-maybe><a href=#dom-canplaytyperesult-maybe>maybe</a></code>" unless the type can be
  confidently established as being supported or not. Generally, a user agent should never return
  "<code id=mime-types:dom-canplaytyperesult-probably><a href=#dom-canplaytyperesult-probably>probably</a></code>" for a type that allows the <code>codecs</code> parameter if that parameter is not present.</p>

  

  <div class=example>

   <p>This script tests to see if the user agent supports a (fictional) new format to dynamically
   decide whether to use a <code id=mime-types:the-video-element-2><a href=#the-video-element>video</a></code> element:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>section</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;video&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;playing-cats.nfv&quot;</c-><c- p>&gt;</c->Download video<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>const</c-> videoSection <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;video&apos;</c-><c- p>);</c->
 <c- a>const</c-> videoElement <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- t>&apos;video&apos;</c-><c- p>);</c->
 <c- a>const</c-> support <c- o>=</c-> videoElement<c- p>.</c->canPlayType<c- p>(</c-><c- t>&apos;video/x-new-fictional-format;codecs=&quot;kittens,bunnies&quot;&apos;</c-><c- p>);</c->
 <c- k>if</c-> <c- p>(</c->support <c- o>===</c-> <c- u>&quot;probably&quot;</c-><c- p>)</c-> <c- p>{</c->
   videoElement<c- p>.</c->setAttribute<c- p>(</c-><c- u>&quot;src&quot;</c-><c- p>,</c-> <c- u>&quot;playing-cats.nfv&quot;</c-><c- p>);</c->
   videoSection<c- p>.</c->replaceChildren<c- p>(</c->videoElement<c- p>);</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p class=note>The <code id=mime-types:attr-source-type><a href=embedded-content.html#attr-source-type>type</a></code> attribute of the
  <code id=mime-types:the-source-element><a href=embedded-content.html#the-source-element>source</a></code> element allows the user agent to avoid downloading resources that use formats
  it cannot render.</p>


  <h5 id=network-states><span class=secno>4.8.11.4</span> Network states<a href=#network-states class=self-link></a></h5>

  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-media-networkstate id=dom-media-networkstate-dev>networkState</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/networkState title="The HTMLMediaElement.networkState property indicates the current state of the fetching of media over the network.">HTMLMediaElement/networkState</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the current state of network activity for the element, from the codes in the list
    below.</p>
   </dl>

  

  <p>As <a href=#media-element id=network-states:media-element>media elements</a> interact with the network, their current
  network activity is represented by the <dfn data-dfn-for=HTMLMediaElement id=dom-media-networkstate data-dfn-type=attribute><code>networkState</code></dfn> attribute. On getting, it must return
  the current network state of the element, which must be one of the following values:</p>

  

  <dl><dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-network_empty data-dfn-type=const><code>NETWORK_EMPTY</code></dfn> (numeric value 0)<dd>The element has not yet been initialized. All attributes are in their initial states.<dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-network_idle data-dfn-type=const><code>NETWORK_IDLE</code></dfn> (numeric value 1)<dd>The element's <a href=#concept-media-load-algorithm id=network-states:concept-media-load-algorithm>resource
   selection algorithm</a> is active and has selected a <a href=#media-resource id=network-states:media-resource>resource</a>, but it is not actually using the network at this time.<dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-network_loading data-dfn-type=const><code>NETWORK_LOADING</code></dfn> (numeric value 2)<dd>The user agent is actively trying to download data.<dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-network_no_source data-dfn-type=const><code>NETWORK_NO_SOURCE</code></dfn> (numeric value 3)<dd>The element's <a href=#concept-media-load-algorithm id=network-states:concept-media-load-algorithm-2>resource
   selection algorithm</a> is active, but it has not yet found a <a href=#media-resource id=network-states:media-resource-2>resource</a> to use.</dl>

  

  <p>The <a href=#concept-media-load-algorithm id=network-states:concept-media-load-algorithm-3>resource selection algorithm</a> defined
  below describes exactly when the <code id=network-states:dom-media-networkstate><a href=#dom-media-networkstate>networkState</a></code>
  attribute changes value and what events fire to indicate changes in this state.</p>

  




  <h5 id=loading-the-media-resource><span class=secno>4.8.11.5</span> Loading the media resource<a href=#loading-the-media-resource class=self-link></a></h5>

  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-media-load id=dom-media-load-dev>load</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load title="The HTMLMediaElement method load() resets the media element to its initial state and begins the process of selecting a media source and loading the media in preparation for playback to begin at the beginning.">HTMLMediaElement/load</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Causes the element to reset and start selecting and loading a new <a href=#media-resource id=loading-the-media-resource:media-resource>media resource</a>
    from scratch.</p>
   </dl>

  

  <p>All <a href=#media-element id=loading-the-media-resource:media-element>media elements</a> have a <dfn id=can-autoplay-flag>can autoplay flag</dfn>,
  which must begin in the true state, and a <dfn id=delaying-the-load-event-flag>delaying-the-load-event flag</dfn>, which must
  begin in the false state. While the <a href=#delaying-the-load-event-flag id=loading-the-media-resource:delaying-the-load-event-flag>delaying-the-load-event flag</a> is true, the element
  must <a id=loading-the-media-resource:delay-the-load-event href=parsing.html#delay-the-load-event>delay the load event</a> of its document.</p>

  <p>When the <dfn data-dfn-for=HTMLMediaElement id=dom-media-load data-dfn-type=method><code>load()</code></dfn>
  method on a <a href=#media-element id=loading-the-media-resource:media-element-2>media element</a> is invoked, the user agent must run the <a href=#media-element-load-algorithm id=loading-the-media-resource:media-element-load-algorithm>media element
  load algorithm</a>.</p>

  <p>A <a href=#media-element id=loading-the-media-resource:media-element-3>media element</a> has an associated boolean <dfn id=is-currently-stalled>is currently stalled</dfn>, which
  is initially false.</p>

  <p>The <dfn id=media-element-load-algorithm>media element load algorithm</dfn> consists of the following steps.</p>

  <ol><li><p>Set this element's <a href=#is-currently-stalled id=loading-the-media-resource:is-currently-stalled>is currently stalled</a> to false.<li><p>Abort any already-running instance of the <a href=#concept-media-load-algorithm id=loading-the-media-resource:concept-media-load-algorithm>resource selection algorithm</a> for this
   element.<li><p>Let <var>pending tasks</var> be a list of all <a href=webappapis.html#concept-task id=loading-the-media-resource:concept-task>tasks</a>
   from the <a href=#media-element id=loading-the-media-resource:media-element-4>media element</a>'s <a href=#media-element-event-task-source id=loading-the-media-resource:media-element-event-task-source>media element event task source</a> in one of the
   <a href=webappapis.html#task-queue id=loading-the-media-resource:task-queue>task queues</a>.<li><p>For each task in <var>pending tasks</var> that would <a href=#resolve-pending-play-promises id=loading-the-media-resource:resolve-pending-play-promises>resolve pending play
   promises</a> or <a href=#reject-pending-play-promises id=loading-the-media-resource:reject-pending-play-promises>reject pending play promises</a>, immediately resolve or reject those
   promises in the order the corresponding tasks were queued.<li>
    <p>Remove each <a href=webappapis.html#concept-task id=loading-the-media-resource:concept-task-2>task</a> in <var>pending tasks</var> from its
    <a id=loading-the-media-resource:task-queue-2 href=webappapis.html#task-queue>task queue</a>.</p>

    <p class=note>Basically, pending events and callbacks are discarded and promises in-flight to
    be resolved/rejected are resolved/rejected immediately when the media element starts loading a
    new resource.</p>
   <li><p>If the <a href=#media-element id=loading-the-media-resource:media-element-5>media element</a>'s <code id=loading-the-media-resource:dom-media-networkstate><a href=#dom-media-networkstate>networkState</a></code> is set to <code id=loading-the-media-resource:dom-media-network_loading><a href=#dom-media-network_loading>NETWORK_LOADING</a></code> or <code id=loading-the-media-resource:dom-media-network_idle><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>, <a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task>queue a media element task</a>
   given the <a href=#media-element id=loading-the-media-resource:media-element-6>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire data-x-internal=concept-event-fire>fire an event</a>
   named <code id=loading-the-media-resource:event-media-abort><a href=#event-media-abort>abort</a></code> at the <a href=#media-element id=loading-the-media-resource:media-element-7>media element</a>.<li>
    <p>If the <a href=#media-element id=loading-the-media-resource:media-element-8>media element</a>'s <code id=loading-the-media-resource:dom-media-networkstate-2><a href=#dom-media-networkstate>networkState</a></code>
    is not set to <code id=loading-the-media-resource:dom-media-network_empty><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>, then:</p>

    <ol><li><p><a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-2>Queue a media element task</a> given the <a href=#media-element id=loading-the-media-resource:media-element-9>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-2 data-x-internal=concept-event-fire>fire an event</a> named <code id=loading-the-media-resource:event-media-emptied><a href=#event-media-emptied>emptied</a></code> at the <a href=#media-element id=loading-the-media-resource:media-element-10>media element</a>.<li><p>If a fetching process is in progress for the <a href=#media-element id=loading-the-media-resource:media-element-11>media
     element</a>, the user agent should stop it.<li><p>If the <a href=#media-element id=loading-the-media-resource:media-element-12>media element</a>'s <a href=#assigned-media-provider-object id=loading-the-media-resource:assigned-media-provider-object>assigned media provider object</a> is a
     <code id=loading-the-media-resource:mediasource><a data-x-internal=mediasource href=https://w3c.github.io/media-source/#idl-def-mediasource>MediaSource</a></code> object, then <a href=https://w3c.github.io/media-source/#mediasource-detach id=loading-the-media-resource:detaching-from-a-media-element data-x-internal=detaching-from-a-media-element>detach</a> it.<li><p><a href="#forget-the-media-element's-media-resource-specific-tracks" id="loading-the-media-resource:forget-the-media-element's-media-resource-specific-tracks">Forget the media element's media-resource-specific tracks</a>.<li><p>If <code id=loading-the-media-resource:dom-media-readystate><a href=#dom-media-readystate>readyState</a></code> is not set to <code id=loading-the-media-resource:dom-media-have_nothing><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, then set it to that state.<li>
     <p>If the <code id=loading-the-media-resource:dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute is false, then:</p>

      <ol><li><p>Set the <code id=loading-the-media-resource:dom-media-paused-2><a href=#dom-media-paused>paused</a></code> attribute to true.<li><p><a href=#take-pending-play-promises id=loading-the-media-resource:take-pending-play-promises>Take pending play promises</a> and <a href=#reject-pending-play-promises id=loading-the-media-resource:reject-pending-play-promises-2>reject pending play promises</a>
       with the result and an <a id=loading-the-media-resource:aborterror href=https://webidl.spec.whatwg.org/#aborterror data-x-internal=aborterror>"<code>AbortError</code>"</a>
       <code id=loading-the-media-resource:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</ol>
     <li><p>If <code id=loading-the-media-resource:dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> is true, set it to false.<li>
      <p>Set the <a href=#current-playback-position id=loading-the-media-resource:current-playback-position>current playback position</a> to 0.</p>

      <p>Set the <a href=#official-playback-position id=loading-the-media-resource:official-playback-position>official playback position</a> to 0.</p>

      <p>If this changed the <a href=#official-playback-position id=loading-the-media-resource:official-playback-position-2>official playback position</a>, then <a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-3>queue a media
      element task</a> given the <a href=#media-element id=loading-the-media-resource:media-element-13>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-3 data-x-internal=concept-event-fire>fire an event</a> named <code id=loading-the-media-resource:event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the <a href=#media-element id=loading-the-media-resource:media-element-14>media element</a>.</p>
     <li><p>Set the <a href=#timeline-offset id=loading-the-media-resource:timeline-offset>timeline offset</a> to Not-a-Number (NaN).<li>
      <p>Update the <code id=loading-the-media-resource:dom-media-duration><a href=#dom-media-duration>duration</a></code> attribute to Not-a-Number
      (NaN).</p>

      <p class=note>The user agent <a href=#durationChange>will not</a> fire a <code id=loading-the-media-resource:event-media-durationchange><a href=#event-media-durationchange>durationchange</a></code> event for this particular change of
      the duration.</p>
     </ol>
   <li><p>Set the <code id=loading-the-media-resource:dom-media-playbackrate><a href=#dom-media-playbackrate>playbackRate</a></code> attribute to the value of
   the <code id=loading-the-media-resource:dom-media-defaultplaybackrate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code> attribute.<li><p>Set the <code id=loading-the-media-resource:dom-media-error><a href=#dom-media-error>error</a></code> attribute to null and the
   <a href=#can-autoplay-flag id=loading-the-media-resource:can-autoplay-flag>can autoplay flag</a> to true.<li><p>Invoke the <a href=#media-element id=loading-the-media-resource:media-element-15>media element</a>'s <a href=#concept-media-load-algorithm id=loading-the-media-resource:concept-media-load-algorithm-2>resource selection algorithm</a>.<li>
    <p class=note>Playback of any previously playing <a href=#media-resource id=loading-the-media-resource:media-resource-2>media resource</a> for this element
    stops.</p>
   </ol>

  <p>The <dfn id=concept-media-load-algorithm>resource selection algorithm</dfn> for a
  <a href=#media-element id=loading-the-media-resource:media-element-16>media element</a> is as follows. This algorithm is always invoked as part of a <a href=webappapis.html#concept-task id=loading-the-media-resource:concept-task-3>task</a>, but one
  of the first steps in the algorithm is to return and continue running the remaining steps
  <a id=loading-the-media-resource:in-parallel href=infrastructure.html#in-parallel>in parallel</a>. In addition, this algorithm interacts
  closely with the <a id=loading-the-media-resource:event-loop href=webappapis.html#event-loop>event loop</a> mechanism; in particular, it has <a href=webappapis.html#synchronous-section id=loading-the-media-resource:synchronous-section>synchronous sections</a> (which are triggered as part of the <a id=loading-the-media-resource:event-loop-2 href=webappapis.html#event-loop>event loop</a>
  algorithm). Steps in such sections are marked with ⌛.</p>

  <ol><li><p>Set the element's <code id=loading-the-media-resource:dom-media-networkstate-3><a href=#dom-media-networkstate>networkState</a></code> attribute to
   the <code id=loading-the-media-resource:dom-media-network_no_source><a href=#dom-media-network_no_source>NETWORK_NO_SOURCE</a></code> value.<li><p>Set the element's <a href=#show-poster-flag id=loading-the-media-resource:show-poster-flag>show poster flag</a> to true.<li><p>Set the <a href=#media-element id=loading-the-media-resource:media-element-17>media element</a>'s <a href=#delaying-the-load-event-flag id=loading-the-media-resource:delaying-the-load-event-flag-2>delaying-the-load-event flag</a> to true
   (this <a href=parsing.html#delay-the-load-event id=loading-the-media-resource:delay-the-load-event-2>delays the load event</a>).<li><p><a id=loading-the-media-resource:await-a-stable-state href=webappapis.html#await-a-stable-state>Await a stable state</a>, allowing the <a href=webappapis.html#concept-task id=loading-the-media-resource:concept-task-4>task</a> that invoked this algorithm to continue. The <a id=loading-the-media-resource:synchronous-section-2 href=webappapis.html#synchronous-section>synchronous
   section</a> consists of all the remaining steps of this algorithm until the algorithm says the
   <a id=loading-the-media-resource:synchronous-section-3 href=webappapis.html#synchronous-section>synchronous section</a> has ended. (Steps in <a href=webappapis.html#synchronous-section id=loading-the-media-resource:synchronous-section-4>synchronous sections</a> are marked with ⌛.)<li>
    <p>⌛ If the <a href=#media-element id=loading-the-media-resource:media-element-18>media element</a>'s <a href=#blocked-on-parser id=loading-the-media-resource:blocked-on-parser>blocked-on-parser</a> flag is false,
    then <a href=#populate-the-list-of-pending-text-tracks id=loading-the-media-resource:populate-the-list-of-pending-text-tracks>populate the list of pending text tracks</a>.</p>
   <li>
    <p>⌛ If the <a href=#media-element id=loading-the-media-resource:media-element-19>media element</a> has an <a href=#assigned-media-provider-object id=loading-the-media-resource:assigned-media-provider-object-2>assigned media provider
    object</a>, then let <var>mode</var> be <i>object</i>.</p>

    <p>⌛ Otherwise, if the <a href=#media-element id=loading-the-media-resource:media-element-20>media element</a> has no <a href=#assigned-media-provider-object id=loading-the-media-resource:assigned-media-provider-object-3>assigned media provider
    object</a> but has a <code id=loading-the-media-resource:attr-media-src><a href=#attr-media-src>src</a></code>
    attribute, then let <var>mode</var> be <i>attribute</i>.</p>

    <p>⌛ Otherwise, if the <a href=#media-element id=loading-the-media-resource:media-element-21>media element</a> does not have an <a href=#assigned-media-provider-object id=loading-the-media-resource:assigned-media-provider-object-4>assigned media provider
    object</a> and does not have a <code id=loading-the-media-resource:attr-media-src-2><a href=#attr-media-src>src</a></code> attribute, but does have a <code id=loading-the-media-resource:the-source-element><a href=embedded-content.html#the-source-element>source</a></code> element child, then
    let <var>mode</var> be <i>children</i> and let <var>candidate</var>
    be the first such <code id=loading-the-media-resource:the-source-element-2><a href=embedded-content.html#the-source-element>source</a></code> element child in <a id=loading-the-media-resource:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>.</p>

    <p>⌛ Otherwise, the <a href=#media-element id=loading-the-media-resource:media-element-22>media element</a> has no <a href=#assigned-media-provider-object id=loading-the-media-resource:assigned-media-provider-object-5>assigned media provider
    object</a> and has neither a <code id=loading-the-media-resource:attr-media-src-3><a href=#attr-media-src>src</a></code> attribute nor a <code id=loading-the-media-resource:the-source-element-3><a href=embedded-content.html#the-source-element>source</a></code> element child:</p>

    <ol><li><p>⌛ Set the <code id=loading-the-media-resource:dom-media-networkstate-4><a href=#dom-media-networkstate>networkState</a></code> to <code id=loading-the-media-resource:dom-media-network_empty-2><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>.<li><p>⌛ Set the element's <a href=#delaying-the-load-event-flag id=loading-the-media-resource:delaying-the-load-event-flag-3>delaying-the-load-event flag</a> to false. This stops <a href=parsing.html#delay-the-load-event id=loading-the-media-resource:delay-the-load-event-3>delaying the load event</a>.<li><p>End the <a id=loading-the-media-resource:synchronous-section-5 href=webappapis.html#synchronous-section>synchronous section</a> and return.</ol>
   <li><p>⌛ Set the <a href=#media-element id=loading-the-media-resource:media-element-23>media element</a>'s <code id=loading-the-media-resource:dom-media-networkstate-5><a href=#dom-media-networkstate>networkState</a></code> to <code id=loading-the-media-resource:dom-media-network_loading-2><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>.<li><p>⌛ <a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-4>Queue a media element task</a> given the <a href=#media-element id=loading-the-media-resource:media-element-24>media element</a> to
   <a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-4 data-x-internal=concept-event-fire>fire an event</a> named <code id=loading-the-media-resource:event-media-loadstart><a href=#event-media-loadstart>loadstart</a></code> at the <a href=#media-element id=loading-the-media-resource:media-element-25>media element</a>.<li>
    <p>Run the appropriate steps from the following list:</p>

    <dl class=switch><dt>If <var>mode</var> is <i>object</i><dd>
      <ol><li><p>⌛ Set the <code id=loading-the-media-resource:dom-media-currentsrc><a href=#dom-media-currentsrc>currentSrc</a></code> attribute to
       the empty string.<li><p>End the <a id=loading-the-media-resource:synchronous-section-6 href=webappapis.html#synchronous-section>synchronous section</a>, continuing the remaining steps
       <a id=loading-the-media-resource:in-parallel-2 href=infrastructure.html#in-parallel>in parallel</a>.<li><p>Run the <a href=#concept-media-load-resource id=loading-the-media-resource:concept-media-load-resource>resource fetch algorithm</a>
       with the <a href=#assigned-media-provider-object id=loading-the-media-resource:assigned-media-provider-object-6>assigned media provider object</a>. If that algorithm returns without
       aborting <em>this</em> one, then the load failed.<li><p><i>Failed with media provider</i>: Reaching this step indicates that the media
       resource failed to load. <a href=#take-pending-play-promises id=loading-the-media-resource:take-pending-play-promises-2>Take pending play promises</a> and <a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-5>queue a media
       element task</a> given the <a href=#media-element id=loading-the-media-resource:media-element-26>media element</a> to run the <a href=#dedicated-media-source-failure-steps id=loading-the-media-resource:dedicated-media-source-failure-steps>dedicated media
       source failure steps</a> with the result.<li><p>Wait for the <a href=webappapis.html#concept-task id=loading-the-media-resource:concept-task-5>task</a> queued by the previous step to have
       executed.<li><p>Return. The element won't attempt to load another resource until this
       algorithm is triggered again.</ol>
     <dt>If <var>mode</var> is <i>attribute</i><dd>
      <ol><li><p>⌛ If the <code id=loading-the-media-resource:attr-media-src-4><a href=#attr-media-src>src</a></code>
       attribute's value is the empty string, then end the <a id=loading-the-media-resource:synchronous-section-7 href=webappapis.html#synchronous-section>synchronous section</a>, and jump
       down to the <i>failed with attribute</i> step below.<li><p>⌛ Let <var>urlRecord</var> be the result of <a id=loading-the-media-resource:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a>
       given the <code id=loading-the-media-resource:attr-media-src-5><a href=#attr-media-src>src</a></code> attribute's value, relative to the
       <a href=#media-element id=loading-the-media-resource:media-element-27>media element</a>'s <a id=loading-the-media-resource:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> when the <code id=loading-the-media-resource:attr-media-src-6><a href=#attr-media-src>src</a></code> attribute was last changed.</p>
       

       <li><p>⌛ If <var>urlRecord</var> is not failure, then set the <code id=loading-the-media-resource:dom-media-currentsrc-2><a href=#dom-media-currentsrc>currentSrc</a></code> attribute to the result of applying the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=loading-the-media-resource:concept-url-serializer data-x-internal=concept-url-serializer>URL serializer</a> to <var>urlRecord</var>.<li><p>End the <a id=loading-the-media-resource:synchronous-section-8 href=webappapis.html#synchronous-section>synchronous section</a>, continuing the remaining steps
       <a id=loading-the-media-resource:in-parallel-3 href=infrastructure.html#in-parallel>in parallel</a>.<li><p>If <var>urlRecord</var> is not failure, then run the <a href=#concept-media-load-resource id=loading-the-media-resource:concept-media-load-resource-2>resource fetch algorithm</a> with
       <var>urlRecord</var>. If that algorithm returns without aborting <em>this</em> one, then the
       load failed.<li><p><i>Failed with attribute</i>: Reaching this step indicates that the media resource
       failed to load or that <var>urlRecord</var> is failure. <a href=#take-pending-play-promises id=loading-the-media-resource:take-pending-play-promises-3>Take pending play
       promises</a> and <a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-6>queue a media element task</a> given the <a href=#media-element id=loading-the-media-resource:media-element-28>media
       element</a> to run the <a href=#dedicated-media-source-failure-steps id=loading-the-media-resource:dedicated-media-source-failure-steps-2>dedicated media source failure steps</a> with the
       result.<li><p>Wait for the <a href=webappapis.html#concept-task id=loading-the-media-resource:concept-task-6>task</a> queued by the previous step to have
       executed.<li><p>Return. The element won't attempt to load another resource until this
       algorithm is triggered again.</ol>
     <dt>Otherwise (<var>mode</var> is <i>children</i>)<dd>
      <ol><li>
        <p>⌛ Let <var>pointer</var> be a position defined by two adjacent nodes in the
        <a href=#media-element id=loading-the-media-resource:media-element-29>media element</a>'s child list, treating the start of the list (before the first
        child in the list, if any) and end of the list (after the last child in the list, if any) as
        nodes in their own right. One node is the node before <var>pointer</var>, and the
        other node is the node after <var>pointer</var>. Initially, let <var>pointer</var> be the position between the <var>candidate</var> node and the
        next node, if there are any, or the end of the list, if it is the last node.</p>

        <p>As nodes are <a href=https://dom.spec.whatwg.org/#concept-node-insert-ext id=loading-the-media-resource:concept-node-insert-ext data-x-internal=concept-node-insert-ext>inserted</a>, <a href=https://dom.spec.whatwg.org/#concept-node-remove-ext id=loading-the-media-resource:concept-node-remove-ext data-x-internal=concept-node-remove-ext>removed</a>, and <a href=https://dom.spec.whatwg.org/#concept-node-move-ext id=loading-the-media-resource:concept-node-move-ext data-x-internal=concept-node-move-ext>moved</a> into the <a href=#media-element id=loading-the-media-resource:media-element-30>media element</a>,
        <var>pointer</var> must be updated as follows:</p>

        <dl><dt>If a new node is <a href=https://dom.spec.whatwg.org/#concept-node-insert-ext id=loading-the-media-resource:concept-node-insert-ext-2 data-x-internal=concept-node-insert-ext>inserted</a> or <a href=https://dom.spec.whatwg.org/#concept-node-move-ext id=loading-the-media-resource:concept-node-move-ext-2 data-x-internal=concept-node-move-ext>moved</a> between the two nodes that define
         <var>pointer</var><dd>Let <var>pointer</var> be the point between the node before <var>pointer</var> and the
         new node. In other words, insertions at <var>pointer</var> go after
         <var>pointer</var>.<dt>If the node before <var>pointer</var> is removed<dd>Let <var>pointer</var> be the point between the node after <var>pointer</var> and the
         node before the node after <var>pointer</var>. In other words, <var>pointer</var> doesn't
         move relative to the remaining nodes.<dt>If the node after <var>pointer</var> is removed<dd>Let <var>pointer</var> be the point between the node before <var>pointer</var> and the
         node after the node before <var>pointer</var>. Just as with the previous case,
         <var>pointer</var> doesn't move relative to the remaining nodes.</dl>

        <p>Other changes don't affect <var>pointer</var>.</p>
       <li><p>⌛ <i>Process candidate</i>: If <var>candidate</var> does not have a
       <code id=loading-the-media-resource:attr-source-src><a href=embedded-content.html#attr-source-src>src</a></code> attribute, or if its <code id=loading-the-media-resource:attr-source-src-2><a href=embedded-content.html#attr-source-src>src</a></code> attribute's value is the empty string, then end the
       <a id=loading-the-media-resource:synchronous-section-9 href=webappapis.html#synchronous-section>synchronous section</a>, and jump down to the <i>failed with elements</i> step
       below.<li><p>⌛ If <var>candidate</var> has a <code id=loading-the-media-resource:attr-source-media><a href=embedded-content.html#attr-source-media>media</a></code>
       attribute whose value does not <a href=common-microsyntaxes.html#matches-the-environment id=loading-the-media-resource:matches-the-environment>match the
       environment</a>, then end the <a id=loading-the-media-resource:synchronous-section-10 href=webappapis.html#synchronous-section>synchronous section</a>, and jump down to the
       <i>failed with elements</i> step below.<li><p>⌛ Let <var>urlRecord</var> be the result of <a id=loading-the-media-resource:encoding-parsing-a-url-2 href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a>
       given <var>candidate</var>'s <code id=loading-the-media-resource:attr-media-src-7><a href=#attr-media-src>src</a></code> attribute's value,
       relative to <var>candidate</var>'s <a id=loading-the-media-resource:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> when the <code id=loading-the-media-resource:attr-media-src-8><a href=#attr-media-src>src</a></code> attribute was last changed.</p>
       

       <li><p>⌛ If <var>urlRecord</var> is failure, then end the <a id=loading-the-media-resource:synchronous-section-11 href=webappapis.html#synchronous-section>synchronous
       section</a>, and jump down to the <i>failed with elements</i> step below.<li><p>⌛ If <var>candidate</var> has a <code id=loading-the-media-resource:attr-source-type><a href=embedded-content.html#attr-source-type>type</a></code> attribute whose value, when parsed as a <a id=loading-the-media-resource:mime-type href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME
       type</a> (including any codecs described by the <code>codecs</code> parameter, for
       types that define that parameter), represents <a href=#a-type-that-the-user-agent-knows-it-cannot-render id=loading-the-media-resource:a-type-that-the-user-agent-knows-it-cannot-render>a type that the user agent knows it cannot
       render</a>, then end the <a id=loading-the-media-resource:synchronous-section-12 href=webappapis.html#synchronous-section>synchronous section</a>, and jump down to the <i>failed with elements</i> step below.<li><p>⌛ Set the <code id=loading-the-media-resource:dom-media-currentsrc-3><a href=#dom-media-currentsrc>currentSrc</a></code> attribute to
       the result of applying the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=loading-the-media-resource:concept-url-serializer-2 data-x-internal=concept-url-serializer>URL serializer</a> to
       <var>urlRecord</var>.<li><p>End the <a id=loading-the-media-resource:synchronous-section-13 href=webappapis.html#synchronous-section>synchronous section</a>, continuing the remaining steps
       <a id=loading-the-media-resource:in-parallel-4 href=infrastructure.html#in-parallel>in parallel</a>.<li><p>Run the <a href=#concept-media-load-resource id=loading-the-media-resource:concept-media-load-resource-3>resource fetch algorithm</a>
       with <var>urlRecord</var>. If that algorithm returns without aborting <em>this</em> one,
       then the load failed.<li><p><i>Failed with elements</i>: <a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-7>Queue a media element task</a> given the
       <a href=#media-element id=loading-the-media-resource:media-element-31>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-5 data-x-internal=concept-event-fire>fire an event</a> named
       <code id=loading-the-media-resource:event-source-error><a href=#event-source-error>error</a></code> at <var>candidate</var>.<li><p><a id=loading-the-media-resource:await-a-stable-state-2 href=webappapis.html#await-a-stable-state>Await a stable state</a>. The <a id=loading-the-media-resource:synchronous-section-14 href=webappapis.html#synchronous-section>synchronous section</a>
       consists of all the remaining steps of this algorithm until the algorithm says the
       <a id=loading-the-media-resource:synchronous-section-15 href=webappapis.html#synchronous-section>synchronous section</a> has ended. (Steps in <a href=webappapis.html#synchronous-section id=loading-the-media-resource:synchronous-section-16>synchronous sections</a> are marked with ⌛.)<li><p>⌛ <a href="#forget-the-media-element's-media-resource-specific-tracks" id="loading-the-media-resource:forget-the-media-element's-media-resource-specific-tracks-2">Forget the media element's media-resource-specific
       tracks</a>.<li><p>⌛ <i>Find next candidate</i>: Let <var>candidate</var> be
       null.<li><p>⌛ <i>Search loop</i>: If the node after <var>pointer</var> is
       the end of the list, then jump to the <i>waiting</i> step below.<li><p>⌛ If the node after <var>pointer</var> is a <code id=loading-the-media-resource:the-source-element-4><a href=embedded-content.html#the-source-element>source</a></code> element,
       let <var>candidate</var> be that element.<li><p>⌛ Advance <var>pointer</var> so that the node before <var>pointer</var> is now the node that was after <var>pointer</var>, and the node
       after <var>pointer</var> is the node after the node that used to be after <var>pointer</var>, if any.<li><p>⌛ If <var>candidate</var> is null, jump back to the <i>search
       loop</i> step. Otherwise, jump back to the <i>process candidate</i> step.<li><p>⌛ <i>Waiting</i>: Set the element's <code id=loading-the-media-resource:dom-media-networkstate-6><a href=#dom-media-networkstate>networkState</a></code> attribute to the <code id=loading-the-media-resource:dom-media-network_no_source-2><a href=#dom-media-network_no_source>NETWORK_NO_SOURCE</a></code> value.<li><p>⌛ Set the element's <a href=#show-poster-flag id=loading-the-media-resource:show-poster-flag-2>show poster flag</a> to true.<li><p>⌛ <a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-8>Queue a media element task</a> given the <a href=#media-element id=loading-the-media-resource:media-element-32>media element</a>
       to set the element's <a href=#delaying-the-load-event-flag id=loading-the-media-resource:delaying-the-load-event-flag-4>delaying-the-load-event flag</a> to false. This stops <a href=parsing.html#delay-the-load-event id=loading-the-media-resource:delay-the-load-event-4>delaying the load event</a>.<li><p>End the <a id=loading-the-media-resource:synchronous-section-17 href=webappapis.html#synchronous-section>synchronous section</a>, continuing the remaining steps
       <a id=loading-the-media-resource:in-parallel-5 href=infrastructure.html#in-parallel>in parallel</a>.<li><p>Wait until the node after <var>pointer</var> is a node other than the end of
       the list. (This step might wait forever.)<li><p><a id=loading-the-media-resource:await-a-stable-state-3 href=webappapis.html#await-a-stable-state>Await a stable state</a>. The <a id=loading-the-media-resource:synchronous-section-18 href=webappapis.html#synchronous-section>synchronous section</a>
       consists of all the remaining steps of this algorithm until the algorithm says the
       <a id=loading-the-media-resource:synchronous-section-19 href=webappapis.html#synchronous-section>synchronous section</a> has ended. (Steps in <a href=webappapis.html#synchronous-section id=loading-the-media-resource:synchronous-section-20>synchronous sections</a> are marked with ⌛.)<li><p>⌛ Set the element's <a href=#delaying-the-load-event-flag id=loading-the-media-resource:delaying-the-load-event-flag-5>delaying-the-load-event flag</a> back to true (this
       <a href=parsing.html#delay-the-load-event id=loading-the-media-resource:delay-the-load-event-5>delays the load event</a> again, in case it hasn't been
       fired yet).</p>

       <li><p>⌛ Set the <code id=loading-the-media-resource:dom-media-networkstate-7><a href=#dom-media-networkstate>networkState</a></code> back to <code id=loading-the-media-resource:dom-media-network_loading-3><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>.<li><p>⌛ Jump back to the <i>find next candidate</i> step above.</ol>
     </dl>

    <p>The <dfn id=dedicated-media-source-failure-steps>dedicated media source failure steps</dfn> with a list of promises
    <var>promises</var> are the following steps:</p>

    <ol><li><p>Set the <code id=loading-the-media-resource:dom-media-error-2><a href=#dom-media-error>error</a></code> attribute to the result of
     <a href=#creating-a-mediaerror id=loading-the-media-resource:creating-a-mediaerror>creating a <code>MediaError</code></a> with <code id=loading-the-media-resource:dom-mediaerror-media_err_src_not_supported><a href=#dom-mediaerror-media_err_src_not_supported>MEDIA_ERR_SRC_NOT_SUPPORTED</a></code>.<li><p><a href="#forget-the-media-element's-media-resource-specific-tracks" id="loading-the-media-resource:forget-the-media-element's-media-resource-specific-tracks-3">Forget the media element's media-resource-specific tracks</a>.<li><p>Set the element's <code id=loading-the-media-resource:dom-media-networkstate-8><a href=#dom-media-networkstate>networkState</a></code> attribute to
     the <code id=loading-the-media-resource:dom-media-network_no_source-3><a href=#dom-media-network_no_source>NETWORK_NO_SOURCE</a></code> value.<li><p>Set the element's <a href=#show-poster-flag id=loading-the-media-resource:show-poster-flag-3>show poster flag</a> to true.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-6 data-x-internal=concept-event-fire>Fire an event</a> named <code id=loading-the-media-resource:event-media-error><a href=#event-media-error>error</a></code> at the <a href=#media-element id=loading-the-media-resource:media-element-33>media element</a>.<li><p><a href=#reject-pending-play-promises id=loading-the-media-resource:reject-pending-play-promises-3>Reject pending play promises</a> with <var>promises</var> and a
     <a id=loading-the-media-resource:notsupportederror href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=loading-the-media-resource:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Set the element's <a href=#delaying-the-load-event-flag id=loading-the-media-resource:delaying-the-load-event-flag-6>delaying-the-load-event flag</a> to false. This stops <a href=parsing.html#delay-the-load-event id=loading-the-media-resource:delay-the-load-event-6>delaying the load event</a>.</ol>
   </ol>

  <p>To <dfn id=verify-a-media-response>verify a media response</dfn> given a <a href=https://fetch.spec.whatwg.org/#concept-response id=loading-the-media-resource:concept-response data-x-internal=concept-response>response</a>
  <var>response</var>, a <a href=#media-resource id=loading-the-media-resource:media-resource-3>media resource</a> <var>resource</var>, and
  "<code>entire resource</code>" or a
  (number, number or "<code>until end</code>") tuple <var>byteRange</var>:</p>

  <ol><li><p>If <var>response</var> is a <a id=loading-the-media-resource:network-error href=https://fetch.spec.whatwg.org/#concept-network-error data-x-internal=network-error>network error</a>, then return false.<li><p>If <var>byteRange</var> is "<code>entire resource</code>", then return
   true.<li><p>Let <var>internalResponse</var> be <var>response</var>'s
   <a id=loading-the-media-resource:unsafe-response href=urls-and-fetching.html#unsafe-response>unsafe response</a>.<li><p>If <var>internalResponse</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-status id=loading-the-media-resource:concept-response-status data-x-internal=concept-response-status>status</a> is
   200, then return true.<li><p>If <var>internalResponse</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-status id=loading-the-media-resource:concept-response-status-2 data-x-internal=concept-response-status>status</a> is
   not 206, then return false.<li>
    <p>If the result of <a href=https://wicg.github.io/background-fetch/#extract-content-range-values id=loading-the-media-resource:extract-content-range-values data-x-internal=extract-content-range-values>extracting content-range values</a> from
    <var>internalResponse</var> is failure, then return false.</p>

    <p class=note>Note that the extracted values are not used, and in particular are not compared
    to <var>byteRange</var>. So this step serves as syntactic validation of the `<code id=loading-the-media-resource:http-content-range><a data-x-internal=http-content-range href=https://httpwg.org/specs/rfc7233.html#header.content-range>Content-Range</a></code>` header, but if the `<code id=loading-the-media-resource:http-content-range-2><a data-x-internal=http-content-range href=https://httpwg.org/specs/rfc7233.html#header.content-range>Content-Range</a></code>` values on the response mismatch the `<code id=loading-the-media-resource:http-range><a data-x-internal=http-range href=https://httpwg.org/specs/rfc7233.html#header.range>Range</a></code>` values on the request, that is not considered a failure.</p>
   <li><p>Let <var>origin</var> be "<code>rewritten</code>" if
   <var>internalResponse</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=loading-the-media-resource:concept-response-url data-x-internal=concept-response-url>URL</a> is null; otherwise
   <var>internalResponse</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=loading-the-media-resource:concept-response-url-2 data-x-internal=concept-response-url>URL</a>'s
   <a href=https://url.spec.whatwg.org/#concept-url-origin id=loading-the-media-resource:concept-url-origin data-x-internal=concept-url-origin>origin</a>.<li><p>Let <var>previousOrigin</var> be <var>resource</var>'s
   <a href=#media-resource-origin id=loading-the-media-resource:media-resource-origin>origin</a>.<li>
    <p>If any of the following are true:</p>

    <ul><li><p><var>previousOrigin</var> is "<code>none</code>";<li><p><var>origin</var> and <var>previousOrigin</var> are "<code>rewritten</code>";
     or<li><p><var>origin</var> and <var>previousOrigin</var> are <a href=browsers.html#concept-origin id=loading-the-media-resource:concept-origin>origins</a>, and <var>origin</var> is <a id=loading-the-media-resource:same-origin href=browsers.html#same-origin>same origin</a> with
     <var>previousOrigin</var>,</ul>

    <p>then set <var>resource</var>'s <a href=#media-resource-origin id=loading-the-media-resource:media-resource-origin-2>origin</a> to
    <var>origin</var>.</p>

    <p>Otherwise, if <var>response</var> is <a id=loading-the-media-resource:cors-cross-origin href=urls-and-fetching.html#cors-cross-origin>CORS-cross-origin</a>, then return false.</p>

    <p>Otherwise, set <var>resource</var>'s <a href=#media-resource-origin id=loading-the-media-resource:media-resource-origin-3>origin</a> to
    "<code>multiple</code>".</p>

    <p class=note>This ensures that opaque responses with range headers do not leak information
    by being patched together with other responses from different origins.</p>
   <li><p>Return true.</ol>

  <p>The <dfn id=concept-media-load-resource data-export="">resource fetch algorithm</dfn> for a
  <a href=#media-element id=loading-the-media-resource:media-element-34>media element</a> and a given <a id=loading-the-media-resource:url-record href=https://url.spec.whatwg.org/#concept-url data-x-internal=url-record>URL record</a> or <a href=#media-provider-object id=loading-the-media-resource:media-provider-object>media provider
  object</a> is as follows:</p>

  <ol><li><p>Let <var>mode</var> be <i>remote</i>.<li>
    <p>If the algorithm was invoked with <a href=#media-provider-object id=loading-the-media-resource:media-provider-object-2>media provider object</a>, then set
    <var>mode</var> to <i>local</i>.</p>

    <p>Otherwise:</p>

    <ol><li><p>Let <var>object</var> be the result of <a href=https://w3c.github.io/FileAPI/#blob-url-obtain-object id=loading-the-media-resource:blob-url-obtain-object data-x-internal=blob-url-obtain-object>obtaining
     a blob object</a> using the <a id=loading-the-media-resource:url-record-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url-record>URL record</a>'s <a href=https://url.spec.whatwg.org/#concept-url-blob-entry id=loading-the-media-resource:concept-url-blob-entry data-x-internal=concept-url-blob-entry>blob URL entry</a> and the <a href=#media-element id=loading-the-media-resource:media-element-35>media element</a>'s
     <a id=loading-the-media-resource:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a id=loading-the-media-resource:relevant-settings-object href=webappapis.html#relevant-settings-object>relevant settings object</a>.<li><p>If <var>object</var> is a <a href=#media-provider-object id=loading-the-media-resource:media-provider-object-3>media provider object</a>, then set <var>mode</var>
     to <i>local</i>.</ol>
   <li><p>If <var>mode</var> is <i>remote</i>, then let the <var>current media resource</var> be the
   resource given by the <a id=loading-the-media-resource:url-record-3 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url-record>URL record</a> passed to this algorithm; otherwise, let the
   <var>current media resource</var> be the resource given by the <a href=#media-provider-object id=loading-the-media-resource:media-provider-object-4>media provider
   object</a>. Either way, the <var>current media resource</var> is now the element's <a href=#media-resource id=loading-the-media-resource:media-resource-4>media
   resource</a>.<li><p>Remove all <a href=#media-resource-specific-text-track id=loading-the-media-resource:media-resource-specific-text-track>media-resource-specific text
   tracks</a> from the <a href=#media-element id=loading-the-media-resource:media-element-36>media element</a>'s <a href=#list-of-pending-text-tracks id=loading-the-media-resource:list-of-pending-text-tracks>list of pending text tracks</a>, if
   any.</p>


   <li>
    <p>Run the appropriate steps from the following list:</p>

    <dl class=switch><dt>If <var>mode</var> is remote<dd>
      <ol><li>
        <p>Optionally, run the following substeps. This is the expected behavior if the user agent
        intends to not attempt to fetch the resource until the user requests it explicitly (e.g. as
        a way to implement the <code id=loading-the-media-resource:attr-media-preload><a href=#attr-media-preload>preload</a></code> attribute's <code id=loading-the-media-resource:attr-media-preload-none><a href=#attr-media-preload-none>none</a></code> keyword).</p>

        <ol><li><p>Set the <code id=loading-the-media-resource:dom-media-networkstate-9><a href=#dom-media-networkstate>networkState</a></code> to <code id=loading-the-media-resource:dom-media-network_idle-2><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>.<li><p><a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-9>Queue a media element task</a> given the <a href=#media-element id=loading-the-media-resource:media-element-37>media element</a> to
         <a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-7 data-x-internal=concept-event-fire>fire an event</a> named <code id=loading-the-media-resource:event-media-suspend><a href=#event-media-suspend>suspend</a></code> at the element.<li><p><a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-10>Queue a media element task</a> given the <a href=#media-element id=loading-the-media-resource:media-element-38>media element</a> to set
         the element's <a href=#delaying-the-load-event-flag id=loading-the-media-resource:delaying-the-load-event-flag-7>delaying-the-load-event flag</a> to false. This stops <a href=parsing.html#delay-the-load-event id=loading-the-media-resource:delay-the-load-event-7>delaying the load event</a>.<li><p>Wait for the task to be run.<li><p>Wait for an <a id=loading-the-media-resource:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> event (e.g., the user requesting
         that the media element begin playback).<li><p>Set the element's <a href=#delaying-the-load-event-flag id=loading-the-media-resource:delaying-the-load-event-flag-8>delaying-the-load-event flag</a> back to true (this <a href=parsing.html#delay-the-load-event id=loading-the-media-resource:delay-the-load-event-8>delays the load event</a> again, in case it hasn't been fired
         yet).</p>

         <li><p>Set the <code id=loading-the-media-resource:dom-media-networkstate-10><a href=#dom-media-networkstate>networkState</a></code> to <code id=loading-the-media-resource:dom-media-network_loading-4><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>.</ol>
       <li><p>Let <var>destination</var> be "<code>audio</code>" if the <a href=#media-element id=loading-the-media-resource:media-element-39>media
       element</a> is an <code id=loading-the-media-resource:the-audio-element><a href=#the-audio-element>audio</a></code> element, or "<code>video</code>"
       otherwise.</p>

       <li><p>Let <var>request</var> be the result of <a href=urls-and-fetching.html#create-a-potential-cors-request id=loading-the-media-resource:create-a-potential-cors-request>creating a potential-CORS request</a> given
       <var>current media resource</var>'s <a id=loading-the-media-resource:url-record-4 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url-record>URL record</a>, <var>destination</var>, and the
       current state of the <a href=#media-element id=loading-the-media-resource:media-element-40>media element</a>'s
       <code id=loading-the-media-resource:attr-script-crossorigin><a href=scripting.html#attr-script-crossorigin>crossorigin</a></code> content attribute.<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-client id=loading-the-media-resource:concept-request-client data-x-internal=concept-request-client>client</a> to the
       <a href=#media-element id=loading-the-media-resource:media-element-41>media element</a>'s <a id=loading-the-media-resource:node-document-4 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a id=loading-the-media-resource:relevant-settings-object-2 href=webappapis.html#relevant-settings-object>relevant settings
       object</a>.<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#request-initiator-type id=loading-the-media-resource:concept-request-initiator-type data-x-internal=concept-request-initiator-type>initiator
       type</a> to <var>destination</var>.<li><p>Let <var>byteRange</var>, which is "<code>entire resource</code>" or a
       (number, number or "<code>until end</code>") tuple, be the byte range required to satisfy
       missing data in <a href=#media-data id=loading-the-media-resource:media-data>media data</a>. This value is <a id=loading-the-media-resource:implementation-defined-2 href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a>
       and may rely on codec, network conditions or other heuristics. The user-agent may determine
       to fetch the resource in full, in which case <var>byteRange</var> would be
       "<code>entire resource</code>", to fetch from a byte offset until the end,
       in which case <var>byteRange</var> would be
       (number, "<code>until end</code>"), or to fetch a range between two byte offsets,
       in which case <var>byteRange</var> would be a (number, number) tuple representing the two
       offsets.<li>
        <p>If <var>byteRange</var> is not "<code>entire resource</code>", then:</p>
        <ol><li><p>If <var>byteRange</var>[1] is "<code>until end</code>", then
         <a id=loading-the-media-resource:add-a-range-header href=https://fetch.spec.whatwg.org/#concept-request-add-range-header data-x-internal=add-a-range-header>add a range header</a> to <var>request</var> given
         <var>byteRange</var>[0].<li><p>Otherwise, <a id=loading-the-media-resource:add-a-range-header-2 href=https://fetch.spec.whatwg.org/#concept-request-add-range-header data-x-internal=add-a-range-header>add a range header</a> to <var>request</var> given
         <var>byteRange</var>[0] and <var>byteRange</var>[1].</ol>
       <li>
        <p><a href=https://fetch.spec.whatwg.org/#concept-fetch id=loading-the-media-resource:concept-fetch data-x-internal=concept-fetch>Fetch</a> <var>request</var>, with
        <i id=loading-the-media-resource:processresponse><a data-x-internal=processresponse href=https://fetch.spec.whatwg.org/#process-response>processResponse</a></i> set to the following steps given
        <a href=https://fetch.spec.whatwg.org/#concept-response id=loading-the-media-resource:concept-response-2 data-x-internal=concept-response>response</a> <var>response</var>:</p>

        <ol><li><p>Let <var>global</var> be the <a href=#media-element id=loading-the-media-resource:media-element-42>media element</a>'s
         <a id=loading-the-media-resource:node-document-5 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a id=loading-the-media-resource:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global object</a>.<li><p>Let <var>updateMedia</var> be to <a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-11>queue a media element task</a> given
         the <a href=#media-element id=loading-the-media-resource:media-element-43>media element</a> to run the first appropriate steps from the
         <a href=#media-data-processing-steps-list id=loading-the-media-resource:media-data-processing-steps-list>media data processing steps list</a> below. (A new task is used for
         this so that the work described below occurs relative to the appropriate
         <a href=#media-element-event-task-source id=loading-the-media-resource:media-element-event-task-source-2>media element event task source</a> rather than using the
         <a id=loading-the-media-resource:networking-task-source href=webappapis.html#networking-task-source>networking task source</a>.)</p>

         <li><p>Let <var>processEndOfMedia</var> be the following step: If the fetching process has
         completed without errors, including decoding the media data, and if all of the data is
         available to the user agent without network access, then, the user agent must move on to
         the <i>final step</i> below. This might never happen, e.g. when streaming an infinite
         resource such as web radio, or if the resource is longer than the user agent's ability to
         cache data.<li><p>If the result of <a href=#verify-a-media-response id=loading-the-media-resource:verify-a-media-response>verifying</a>
         <var>response</var> given the <var>current media resource</var> and <var>byteRange</var>
         is false, then abort these steps.<li><p>Otherwise, <a href=https://fetch.spec.whatwg.org/#body-incrementally-read id=loading-the-media-resource:body-incrementally-read data-x-internal=body-incrementally-read>incrementally read</a>
         <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-body id=loading-the-media-resource:concept-response-body data-x-internal=concept-response-body>body</a> given
         <var>updateMedia</var>, <var>processEndOfMedia</var>, an empty algorithm, and
         <var>global</var>.<li><p>Update the <a href=#media-data id=loading-the-media-resource:media-data-2>media data</a> with the contents of <var>response</var>'s
         <a id=loading-the-media-resource:unsafe-response-2 href=urls-and-fetching.html#unsafe-response>unsafe response</a> obtained in this fashion. <var>response</var> can be
         <a id=loading-the-media-resource:cors-same-origin href=urls-and-fetching.html#cors-same-origin>CORS-same-origin</a> or <a id=loading-the-media-resource:cors-cross-origin-2 href=urls-and-fetching.html#cors-cross-origin>CORS-cross-origin</a>; this affects whether
         subtitles referenced in the <a href=#media-data id=loading-the-media-resource:media-data-3>media data</a> are exposed in the API and, for
         <code id=loading-the-media-resource:the-video-element><a href=#the-video-element>video</a></code> elements, whether a <code id=loading-the-media-resource:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code> gets tainted when the video is
         drawn on it.</ol>

        <p>The <dfn id=stall-timeout data-export="">media element stall timeout</dfn> is an
        <a id=loading-the-media-resource:implementation-defined-3 href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> length of time, which should be about three seconds.
        When a <a href=#media-element id=loading-the-media-resource:media-element-44>media element</a> that is actively attempting to obtain <a href=#media-data id=loading-the-media-resource:media-data-4>media
        data</a> has failed to receive any data for a duration equal to the <a href=#stall-timeout id=loading-the-media-resource:stall-timeout>media element
        stall timeout</a>, the user agent must <a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-12>queue a media element task</a> given the
        <a href=#media-element id=loading-the-media-resource:media-element-45>media element</a> to:</p>

        <ol><li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-8 data-x-internal=concept-event-fire>Fire an event</a> named <code id=loading-the-media-resource:event-media-stalled><a href=#event-media-stalled>stalled</a></code> at the element.<li><p>Set the element's <a href=#is-currently-stalled id=loading-the-media-resource:is-currently-stalled-2>is currently stalled</a> to true.</ol>

        <p>User agents may allow users to selectively block or slow <a href=#media-data id=loading-the-media-resource:media-data-5>media data</a> downloads.
        When a <a href=#media-element id=loading-the-media-resource:media-element-46>media element</a>'s download has been blocked altogether, the user agent must
        act as if it was stalled (as opposed to acting as if the connection was closed). The rate of the
        download may also be throttled automatically by the user agent, e.g. to balance the download
        with other connections sharing the same bandwidth.</p>

        <p id=resourceSuspend>User agents may decide to not download more content at any time,
        e.g. after buffering five minutes of a one hour media resource, while waiting for the user
        to decide whether to play the resource or not, while waiting for user input in an
        interactive resource, or when the user navigates away from the page. When a <a href=#media-element id=loading-the-media-resource:media-element-47>media
        element</a>'s download has been suspended, the user agent must <a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-13>queue a media
        element task</a> given the <a href=#media-element id=loading-the-media-resource:media-element-48>media element</a> to set the <code id=loading-the-media-resource:dom-media-networkstate-11><a href=#dom-media-networkstate>networkState</a></code> to <code id=loading-the-media-resource:dom-media-network_idle-3><a href=#dom-media-network_idle>NETWORK_IDLE</a></code> and <a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-9 data-x-internal=concept-event-fire>fire an event</a> named <code id=loading-the-media-resource:event-media-suspend-2><a href=#event-media-suspend>suspend</a></code> at the element. If and when downloading of the
        resource resumes, the user agent must <a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-14>queue a media element task</a> given the
        <a href=#media-element id=loading-the-media-resource:media-element-49>media element</a> to set the <code id=loading-the-media-resource:dom-media-networkstate-12><a href=#dom-media-networkstate>networkState</a></code> to <code id=loading-the-media-resource:dom-media-network_loading-5><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>. Between the queuing of these
        tasks, the load is suspended (so <code id=loading-the-media-resource:event-media-progress><a href=#event-media-progress>progress</a></code> events
        don't fire, as described above).</p>

        <p class=note>The <code id=loading-the-media-resource:attr-media-preload-2><a href=#attr-media-preload>preload</a></code> attribute provides a hint
        regarding how much buffering the author thinks is advisable, even in the absence of the <code id=loading-the-media-resource:attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute.</p>

        <p>When a user agent decides to completely suspend a download, e.g., if it is waiting until
        the user starts playback before downloading any further content, the user agent must
        <a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-15>queue a media element task</a> given the <a href=#media-element id=loading-the-media-resource:media-element-50>media element</a> to set the
        element's <a href=#delaying-the-load-event-flag id=loading-the-media-resource:delaying-the-load-event-flag-9>delaying-the-load-event flag</a> to false. This stops <a href=parsing.html#delay-the-load-event id=loading-the-media-resource:delay-the-load-event-9>delaying the load event</a>.</p>

        <p>Although the above steps give an algorithm for issuing requests, the user agent may use
        other means besides those exact ones, especially in the face of error conditions. For
        example, the user agent may reconnect to the server or switch to a streaming protocol. The
        user agent must only consider the resource erroneous, and proceed into the error branches
        of the above steps, if the user agent has given up trying to fetch the resource.</p>

        <p>To determine the format of the <a href=#media-resource id=loading-the-media-resource:media-resource-5>media resource</a>, the user agent must use the
        <a href=https://mimesniff.spec.whatwg.org/#rules-for-sniffing-audio-and-video-specifically id=loading-the-media-resource:content-type-sniffing:-video data-x-internal=content-type-sniffing:-video>rules for sniffing audio and video specifically</a>.</p>

        <p>While the load is not suspended (see below), every 350ms (±200ms) or for every byte
        received, whichever is <em>least</em> frequent, <a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-16>queue a media element task</a>
        given the <a href=#media-element id=loading-the-media-resource:media-element-51>media element</a> to:

        <ol><li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-10 data-x-internal=concept-event-fire>Fire an event</a> named <code id=loading-the-media-resource:event-media-progress-2><a href=#event-media-progress>progress</a></code> at the element.<li><p>Set the element's <a href=#is-currently-stalled id=loading-the-media-resource:is-currently-stalled-3>is currently stalled</a> to false.</ol>

        <p>While the user agent might still need network access to obtain parts of the <a href=#media-resource id=loading-the-media-resource:media-resource-6>media
        resource</a>, the user agent must remain on this step.</p>

        <p class=example>For example, if the user agent has discarded the first half of a video, the
        user agent will remain at this step even once the <a href=#ended-playback id=loading-the-media-resource:ended-playback>playback has
        ended</a>, because there is always the chance the user will seek back to the start. In fact,
        in this situation, once <a href=#ended-playback id=loading-the-media-resource:ended-playback-2>playback has ended</a>, the user agent
        will end up firing a <code id=loading-the-media-resource:event-media-suspend-3><a href=#event-media-suspend>suspend</a></code> event, as described
        earlier.</p>
       </ol>
     <dt>Otherwise (<var>mode</var> is <i>local</i>)<dd>
      <p>The resource described by the <var>current media resource</var>, if any, contains the
      <a href=#media-data id=loading-the-media-resource:media-data-6>media data</a>. It is <a id=loading-the-media-resource:cors-same-origin-2 href=urls-and-fetching.html#cors-same-origin>CORS-same-origin</a>.</p>

      <p>If the <var>current media resource</var> is a raw data stream (e.g. from a
      <code id=loading-the-media-resource:file><a data-x-internal=file href=https://w3c.github.io/FileAPI/#dfn-file>File</a></code> object), then to determine the format of the <a href=#media-resource id=loading-the-media-resource:media-resource-7>media resource</a>,
      the user agent must use the <a href=https://mimesniff.spec.whatwg.org/#rules-for-sniffing-audio-and-video-specifically id=loading-the-media-resource:content-type-sniffing:-video-2 data-x-internal=content-type-sniffing:-video>rules for sniffing
      audio and video specifically</a>. Otherwise, if the data stream is pre-decoded, then the
      format is the format given by the relevant specification.</p>

      <p>Whenever new data for the <var>current media resource</var> becomes available, <a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-17>queue
      a media element task</a> given the <a href=#media-element id=loading-the-media-resource:media-element-52>media element</a> to run the first appropriate
      steps from the <a href=#media-data-processing-steps-list id=loading-the-media-resource:media-data-processing-steps-list-2>media data processing steps list</a> below.</p>

      <p>When the <var>current media resource</var> is permanently exhausted (e.g. all the bytes of
      a <code id=loading-the-media-resource:blob><a data-x-internal=blob href=https://w3c.github.io/FileAPI/#dfn-Blob>Blob</a></code> have been processed), if there were no decoding errors, then the user
      agent must move on to the <i>final step</i> below. This might never happen, e.g. if the
      <var>current media resource</var> is a <code id=loading-the-media-resource:mediastream><a data-x-internal=mediastream href=https://w3c.github.io/mediacapture-main/getusermedia.html#idl-def-mediastream>MediaStream</a></code>.</p>
     </dl>

    <p>The <dfn id=media-data-processing-steps-list>media data processing steps list</dfn> is as follows:</p>

    <dl class=switch><dt>If the <a href=#media-data id=loading-the-media-resource:media-data-7>media data</a> cannot be fetched at all, due to network errors, causing the
     user agent to give up trying to fetch the resource<dt>If the <a href=#media-data id=loading-the-media-resource:media-data-8>media data</a> can be fetched but is found by inspection to be in an
     unsupported format, or can otherwise not be rendered at all<dd>
      <p>DNS errors, HTTP 4xx and 5xx errors (and equivalents in other protocols), and other fatal
      network errors that occur before the user agent has established whether the <var>current media resource</var> is usable, as well as the file using an unsupported
      container format, or using unsupported codecs for all the data, must cause the user agent to
      execute the following steps:</p>

      <ol><li><p>The user agent should cancel the fetching process.<li><p>Abort this subalgorithm, returning to the <a href=#concept-media-load-algorithm id=loading-the-media-resource:concept-media-load-algorithm-3>resource selection algorithm</a>.</p>
      </ol>
     <dt id=found-another-audio-track>If the <a href=#media-resource id=loading-the-media-resource:media-resource-8>media resource</a> is found to have an audio
     track<dd>
      <ol><li><p>Create an <code id=loading-the-media-resource:audiotrack><a href=#audiotrack>AudioTrack</a></code> object to represent the audio track.<li><p>Update the <a href=#media-element id=loading-the-media-resource:media-element-53>media element</a>'s <code id=loading-the-media-resource:dom-media-audiotracks><a href=#dom-media-audiotracks>audioTracks</a></code> attribute's <code id=loading-the-media-resource:audiotracklist><a href=#audiotracklist>AudioTrackList</a></code>
       object with the new <code id=loading-the-media-resource:audiotrack-2><a href=#audiotrack>AudioTrack</a></code> object.<li><p>Let <var>enable</var> be <i>unknown</i>.<li>
        <p>If either the <a href=#media-resource id=loading-the-media-resource:media-resource-9>media resource</a> or the <a id=loading-the-media-resource:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the <var>current
        media resource</var> indicate a particular set of audio tracks to enable, or if the user
        agent has information that would facilitate the selection of specific audio tracks to
        improve the user's experience, then: if this audio track is one of the ones to enable, then
        set <var>enable</var> to <i>true</i>, otherwise, set <var>enable</var>
        to <i>false</i>.</p>

        <p class=example>This could be triggered by <a id=loading-the-media-resource:media-fragment-syntax href=https://www.w3.org/TR/media-frags/#media-fragment-syntax data-x-internal=media-fragment-syntax>media fragment syntax</a>, but it
        could also be triggered e.g. by the user agent selecting a 5.1 surround sound audio track
        over a stereo audio track.</p>
       <li><p>If <var>enable</var> is still <i>unknown</i>, then, if the <a href=#media-element id=loading-the-media-resource:media-element-54>media
       element</a> does not yet have an <a href=#dom-audiotrack-enabled id=loading-the-media-resource:dom-audiotrack-enabled>enabled</a>
       audio track, then set <var>enable</var> to <i>true</i>, otherwise, set <var>enable</var> to <i>false</i>.<li><p>If <var>enable</var> is <i>true</i>, then enable this audio track,
       otherwise, do not enable this audio track.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-11 data-x-internal=concept-event-fire>Fire an event</a> named <code id=loading-the-media-resource:event-media-addtrack><a href=#event-media-addtrack>addtrack</a></code> at this <code id=loading-the-media-resource:audiotracklist-2><a href=#audiotracklist>AudioTrackList</a></code> object,
       using <code id=loading-the-media-resource:trackevent><a href=#trackevent>TrackEvent</a></code>, with the <code id=loading-the-media-resource:dom-trackevent-track><a href=#dom-trackevent-track>track</a></code>
       attribute initialized to the new <code id=loading-the-media-resource:audiotrack-3><a href=#audiotrack>AudioTrack</a></code> object.</ol>
     <dt id=found-another-video-track>If the <a href=#media-resource id=loading-the-media-resource:media-resource-10>media resource</a> is found to have a video
     track<dd>
      <ol><li><p>Create a <code id=loading-the-media-resource:videotrack><a href=#videotrack>VideoTrack</a></code> object to represent the video track.<li><p>Update the <a href=#media-element id=loading-the-media-resource:media-element-55>media element</a>'s <code id=loading-the-media-resource:dom-media-videotracks><a href=#dom-media-videotracks>videoTracks</a></code> attribute's <code id=loading-the-media-resource:videotracklist><a href=#videotracklist>VideoTrackList</a></code>
       object with the new <code id=loading-the-media-resource:videotrack-2><a href=#videotrack>VideoTrack</a></code> object.<li><p>Let <var>enable</var> be <i>unknown</i>.<li>
        <p>If either the <a href=#media-resource id=loading-the-media-resource:media-resource-11>media resource</a> or the <a id=loading-the-media-resource:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the <var>current
        media resource</var> indicate a particular set of video tracks to enable, or if the user
        agent has information that would facilitate the selection of specific video tracks to
        improve the user's experience, then: if this video track is the first such video track, then
        set <var>enable</var> to <i>true</i>, otherwise, set <var>enable</var>
        to <i>false</i>.</p>

        <p class=example>This could again be triggered by <a id=loading-the-media-resource:media-fragment-syntax-2 href=https://www.w3.org/TR/media-frags/#media-fragment-syntax data-x-internal=media-fragment-syntax>media fragment syntax</a>.</p>
       <li><p>If <var>enable</var> is still <i>unknown</i>, then, if the <a href=#media-element id=loading-the-media-resource:media-element-56>media
       element</a> does not yet have a <a href=#dom-videotrack-selected id=loading-the-media-resource:dom-videotrack-selected>selected</a>
       video track, then set <var>enable</var> to <i>true</i>, otherwise, set <var>enable</var> to <i>false</i>.<li><p>If <var>enable</var> is <i>true</i>, then select this track and unselect any
       previously selected video tracks, otherwise, do not select this video track. If other tracks
       are unselected, then <a href=#toggle-video-track>a <code>change</code> event will be fired</a>.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-12 data-x-internal=concept-event-fire>Fire an event</a> named <code id=loading-the-media-resource:event-media-addtrack-2><a href=#event-media-addtrack>addtrack</a></code> at this <code id=loading-the-media-resource:videotracklist-2><a href=#videotracklist>VideoTrackList</a></code> object,
       using <code id=loading-the-media-resource:trackevent-2><a href=#trackevent>TrackEvent</a></code>, with the <code id=loading-the-media-resource:dom-trackevent-track-2><a href=#dom-trackevent-track>track</a></code>
       attribute initialized to the new <code id=loading-the-media-resource:videotrack-3><a href=#videotrack>VideoTrack</a></code> object.</ol>
     <dt id=getting-media-metadata>Once enough of the <a href=#media-data id=loading-the-media-resource:media-data-9>media data</a> has been fetched to
     determine the duration of the <a href=#media-resource id=loading-the-media-resource:media-resource-12>media resource</a>, its dimensions, and other
     metadata<dd>
      <p>This indicates that the resource is usable. The user agent must follow these substeps:</p>

      <ol><li>
        <p><a href=#defineTimeline id=loading-the-media-resource:defineTimeline>Establish the media timeline</a> for the purposes of the <a href=#current-playback-position id=loading-the-media-resource:current-playback-position-2>current playback
        position</a> and the <a href=#earliest-possible-position id=loading-the-media-resource:earliest-possible-position>earliest possible position</a>, based on the <a href=#media-data id=loading-the-media-resource:media-data-10>media data</a>.</p>
       <li>
        <p>Update the <a href=#timeline-offset id=loading-the-media-resource:timeline-offset-2>timeline offset</a> to the date and time that corresponds to the zero
        time in the <a href=#media-timeline id=loading-the-media-resource:media-timeline>media timeline</a> established in the previous step, if any. If no
        explicit time and date is given by the <a href=#media-resource id=loading-the-media-resource:media-resource-13>media resource</a>, the <a href=#timeline-offset id=loading-the-media-resource:timeline-offset-3>timeline
        offset</a> must be set to Not-a-Number (NaN).</p>
       <li><p>Set the <a href=#current-playback-position id=loading-the-media-resource:current-playback-position-3>current playback position</a> and the <a href=#official-playback-position id=loading-the-media-resource:official-playback-position-3>official playback
       position</a> to the <a href=#earliest-possible-position id=loading-the-media-resource:earliest-possible-position-2>earliest possible position</a>.<li>
        <p>Update the <code id=loading-the-media-resource:dom-media-duration-2><a href=#dom-media-duration>duration</a></code> attribute with the time of
        the last frame of the resource, if known, on the <a href=#media-timeline id=loading-the-media-resource:media-timeline-2>media timeline</a> established
        above. If it is not known (e.g. a stream that is in principle infinite), update the <code id=loading-the-media-resource:dom-media-duration-3><a href=#dom-media-duration>duration</a></code> attribute to the value positive Infinity.</p>

        <p class=note>The user agent <a href=#durationChange>will</a> <a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-18>queue a media
        element task</a> given the <a href=#media-element id=loading-the-media-resource:media-element-57>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-13 data-x-internal=concept-event-fire>fire an event</a> named <code id=loading-the-media-resource:event-media-durationchange-2><a href=#event-media-durationchange>durationchange</a></code> at the element at this point.</p>
       <li>
        <p>For <code id=loading-the-media-resource:the-video-element-2><a href=#the-video-element>video</a></code> elements, set the <code id=loading-the-media-resource:dom-video-videowidth><a href=#dom-video-videowidth>videoWidth</a></code> and <code id=loading-the-media-resource:dom-video-videoheight><a href=#dom-video-videoheight>videoHeight</a></code> attributes, and <a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-19>queue a media
        element task</a> given the <a href=#media-element id=loading-the-media-resource:media-element-58>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-14 data-x-internal=concept-event-fire>fire an event</a> named <code id=loading-the-media-resource:event-media-resize><a href=#event-media-resize>resize</a></code> at the <a href=#media-element id=loading-the-media-resource:media-element-59>media element</a>.</p>

        <p class=note>Further <code id=loading-the-media-resource:event-media-resize-2><a href=#event-media-resize>resize</a></code> events will be fired
        if the dimensions subsequently change.</p>
       <li>
        <p>Set the <code id=loading-the-media-resource:dom-media-readystate-2><a href=#dom-media-readystate>readyState</a></code> attribute to <code id=loading-the-media-resource:dom-media-have_metadata><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>.</p>

        <p class=note>A <code id=loading-the-media-resource:event-media-loadedmetadata><a href=#event-media-loadedmetadata>loadedmetadata</a></code> DOM event
        <a href=#fire-loadedmetadata>will be fired</a> as part of setting the <code id=loading-the-media-resource:dom-media-readystate-3><a href=#dom-media-readystate>readyState</a></code> attribute to a new value.</p>
       <li><p>Let <var>jumped</var> be false.<li><p>If the <a href=#media-element id=loading-the-media-resource:media-element-60>media element</a>'s <a href=#default-playback-start-position id=loading-the-media-resource:default-playback-start-position>default playback start position</a> is
       greater than zero, then <a href=#dom-media-seek id=loading-the-media-resource:dom-media-seek>seek</a> to that time, and let <var>jumped</var> be true.<li><p>Set the <a href=#media-element id=loading-the-media-resource:media-element-61>media element</a>'s <a href=#default-playback-start-position id=loading-the-media-resource:default-playback-start-position-2>default playback
       start position</a> to zero.<li><p>Let the <var>initial playback position</var> be 0.<li>
        <p>If either the <a href=#media-resource id=loading-the-media-resource:media-resource-14>media resource</a> or the <a id=loading-the-media-resource:url-3 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the <var>current
        media resource</var> indicate a particular start time, then set the <var>initial playback
        position</var> to that time and, if <var>jumped</var> is still false, <a href=#dom-media-seek id=loading-the-media-resource:dom-media-seek-2>seek</a> to that time.</p>

        <p class=example>For example, with media formats that support <a id=loading-the-media-resource:media-fragment-syntax-3 href=https://www.w3.org/TR/media-frags/#media-fragment-syntax data-x-internal=media-fragment-syntax>media fragment
        syntax</a>, the <a href=https://url.spec.whatwg.org/#concept-url-fragment id=loading-the-media-resource:concept-url-fragment data-x-internal=concept-url-fragment>fragment</a> can be used to
        indicate a start position.</p>
       <li><p>If there is no <a href=#dom-audiotrack-enabled id=loading-the-media-resource:dom-audiotrack-enabled-2>enabled</a> audio track, then
       enable an audio track. This <a href=#toggle-audio-track>will cause a <code>change</code> event to be fired</a>.<li><p>If there is no <a href=#dom-videotrack-selected id=loading-the-media-resource:dom-videotrack-selected-2>selected</a> video track,
       then select a video track. This <a href=#toggle-video-track>will cause a <code>change</code> event to be fired</a>.</ol>

      <p>Once the <code id=loading-the-media-resource:dom-media-readystate-4><a href=#dom-media-readystate>readyState</a></code> attribute reaches <code id=loading-the-media-resource:dom-media-have_current_data><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code>, <a href=#fire-loadeddata>after
      the <code>loadeddata</code> event has been fired</a>, set the
      element's <a href=#delaying-the-load-event-flag id=loading-the-media-resource:delaying-the-load-event-flag-10>delaying-the-load-event flag</a> to false. This stops <a href=parsing.html#delay-the-load-event id=loading-the-media-resource:delay-the-load-event-10>delaying the load event</a>.</p>

      <p class=note>A user agent that is attempting to reduce network usage while still fetching
      the metadata for each <a href=#media-resource id=loading-the-media-resource:media-resource-15>media resource</a> would also stop buffering at this point,
      following <a href=#resourceSuspend>the rules described previously</a>, which involve the
      <code id=loading-the-media-resource:dom-media-networkstate-13><a href=#dom-media-networkstate>networkState</a></code> attribute switching to the <code id=loading-the-media-resource:dom-media-network_idle-4><a href=#dom-media-network_idle>NETWORK_IDLE</a></code> value and a <code id=loading-the-media-resource:event-media-suspend-4><a href=#event-media-suspend>suspend</a></code> event firing.</p>

      <p class=note>The user agent is <em>required</em> to determine the duration of the
      <a href=#media-resource id=loading-the-media-resource:media-resource-16>media resource</a> and go through this step before playing.</p> 
     <dt>Once the entire <a href=#media-resource id=loading-the-media-resource:media-resource-17>media resource</a> has been fetched (but potentially before any of
     it has been decoded)<dd>
      <p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-15 data-x-internal=concept-event-fire>Fire an event</a> named <code id=loading-the-media-resource:event-media-progress-3><a href=#event-media-progress>progress</a></code> at the <a href=#media-element id=loading-the-media-resource:media-element-62>media element</a>.</p>

      <p>Set the <code id=loading-the-media-resource:dom-media-networkstate-14><a href=#dom-media-networkstate>networkState</a></code> to <code id=loading-the-media-resource:dom-media-network_idle-5><a href=#dom-media-network_idle>NETWORK_IDLE</a></code> and <a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-16 data-x-internal=concept-event-fire>fire an event</a> named
      <code id=loading-the-media-resource:event-media-suspend-5><a href=#event-media-suspend>suspend</a></code> at the <a href=#media-element id=loading-the-media-resource:media-element-63>media element</a>.</p>

      <p>If the user agent ever discards any <a href=#media-data id=loading-the-media-resource:media-data-11>media data</a> and then needs to resume the
      network activity to obtain it again, then it must <a href=#queue-a-media-element-task id=loading-the-media-resource:queue-a-media-element-task-20>queue a media element task</a>
      given the <a href=#media-element id=loading-the-media-resource:media-element-64>media element</a> to set the <code id=loading-the-media-resource:dom-media-networkstate-15><a href=#dom-media-networkstate>networkState</a></code> to <code id=loading-the-media-resource:dom-media-network_loading-6><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>.</p>

      <p class=note>If the user agent can keep the <a href=#media-resource id=loading-the-media-resource:media-resource-18>media resource</a> loaded, then the
      algorithm will continue to its <i>final step</i> below, which aborts the algorithm.</p>
     <dt>If the connection is interrupted after some <a href=#media-data id=loading-the-media-resource:media-data-12>media data</a> has been received,
     causing the user agent to give up trying to fetch the resource<dd>
      <p>Fatal network errors that occur after the user agent has established whether the <var>current media resource</var> is usable (i.e. once the <a href=#media-element id=loading-the-media-resource:media-element-65>media element</a>'s
      <code id=loading-the-media-resource:dom-media-readystate-5><a href=#dom-media-readystate>readyState</a></code> attribute is no longer <code id=loading-the-media-resource:dom-media-have_nothing-2><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>) must cause the user agent to execute the
      following steps:</p>

      <ol><li><p>The user agent should cancel the fetching process.<li><p>Set the <code id=loading-the-media-resource:dom-media-error-3><a href=#dom-media-error>error</a></code> attribute to the result of
       <a href=#creating-a-mediaerror id=loading-the-media-resource:creating-a-mediaerror-2>creating a <code>MediaError</code></a> with <code id=loading-the-media-resource:dom-mediaerror-media_err_network><a href=#dom-mediaerror-media_err_network>MEDIA_ERR_NETWORK</a></code>.<li><p>Set the element's <code id=loading-the-media-resource:dom-media-networkstate-16><a href=#dom-media-networkstate>networkState</a></code> attribute
       to the <code id=loading-the-media-resource:dom-media-network_idle-6><a href=#dom-media-network_idle>NETWORK_IDLE</a></code> value.<li><p>Set the element's <a href=#delaying-the-load-event-flag id=loading-the-media-resource:delaying-the-load-event-flag-11>delaying-the-load-event flag</a> to false. This stops <a href=parsing.html#delay-the-load-event id=loading-the-media-resource:delay-the-load-event-11>delaying the load event</a>.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-17 data-x-internal=concept-event-fire>Fire an event</a> named <code id=loading-the-media-resource:event-media-error-2><a href=#event-media-error>error</a></code> at the <a href=#media-element id=loading-the-media-resource:media-element-66>media element</a>.<li><p>Abort the overall <a href=#concept-media-load-algorithm id=loading-the-media-resource:concept-media-load-algorithm-4>resource selection
       algorithm</a>.</ol>
     <dt id=fatal-decode-error>If the <a href=#media-data id=loading-the-media-resource:media-data-13>media data</a> is corrupted<dd>
      <p>Fatal errors in decoding the <a href=#media-data id=loading-the-media-resource:media-data-14>media data</a> that occur after the user agent has
      established whether the <var>current media resource</var> is usable (i.e. once the <a href=#media-element id=loading-the-media-resource:media-element-67>media element</a>'s
      <code id=loading-the-media-resource:dom-media-readystate-6><a href=#dom-media-readystate>readyState</a></code> attribute is no longer <code id=loading-the-media-resource:dom-media-have_nothing-3><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>) must cause the
      user agent to execute the following steps:</p>

      <ol><li><p>The user agent should cancel the fetching process.<li><p>Set the <code id=loading-the-media-resource:dom-media-error-4><a href=#dom-media-error>error</a></code> attribute to the result of
       <a href=#creating-a-mediaerror id=loading-the-media-resource:creating-a-mediaerror-3>creating a <code>MediaError</code></a> with <code id=loading-the-media-resource:dom-mediaerror-media_err_decode><a href=#dom-mediaerror-media_err_decode>MEDIA_ERR_DECODE</a></code>.<li><p>Set the element's <code id=loading-the-media-resource:dom-media-networkstate-17><a href=#dom-media-networkstate>networkState</a></code> attribute
       to the <code id=loading-the-media-resource:dom-media-network_idle-7><a href=#dom-media-network_idle>NETWORK_IDLE</a></code> value.<li><p>Set the element's <a href=#delaying-the-load-event-flag id=loading-the-media-resource:delaying-the-load-event-flag-12>delaying-the-load-event flag</a> to false. This stops <a href=parsing.html#delay-the-load-event id=loading-the-media-resource:delay-the-load-event-12>delaying the load event</a>.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-18 data-x-internal=concept-event-fire>Fire an event</a> named <code id=loading-the-media-resource:event-media-error-3><a href=#event-media-error>error</a></code> at the <a href=#media-element id=loading-the-media-resource:media-element-68>media element</a>.<li><p>Abort the overall <a href=#concept-media-load-algorithm id=loading-the-media-resource:concept-media-load-algorithm-5>resource selection
       algorithm</a>.</ol>
     <dt>If the <a href=#media-data id=loading-the-media-resource:media-data-15>media data</a> fetching process is aborted by the user<dd>
      <p>The fetching process is aborted by the user, e.g. because the user
      pressed a "stop" button, the user agent must execute the following steps. These steps are not
      followed if the <code id=loading-the-media-resource:dom-media-load><a href=#dom-media-load>load()</a></code> method itself is invoked while
      these steps are running, as the steps above handle that particular kind of abort.</p>

      <ol><li><p>The user agent should cancel the fetching process.<li><p>Set the <code id=loading-the-media-resource:dom-media-error-5><a href=#dom-media-error>error</a></code> attribute to the result of
       <a href=#creating-a-mediaerror id=loading-the-media-resource:creating-a-mediaerror-4>creating a <code>MediaError</code></a> with <code id=loading-the-media-resource:dom-mediaerror-media_err_aborted><a href=#dom-mediaerror-media_err_aborted>MEDIA_ERR_ABORTED</a></code>.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-19 data-x-internal=concept-event-fire>Fire an event</a> named <code id=loading-the-media-resource:event-media-abort-2><a href=#event-media-abort>abort</a></code> at the <a href=#media-element id=loading-the-media-resource:media-element-69>media element</a>.<li>
        <p>If the <a href=#media-element id=loading-the-media-resource:media-element-70>media element</a>'s <code id=loading-the-media-resource:dom-media-readystate-7><a href=#dom-media-readystate>readyState</a></code>
        attribute has a value equal to <code id=loading-the-media-resource:dom-media-have_nothing-4><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, set
        the element's <code id=loading-the-media-resource:dom-media-networkstate-18><a href=#dom-media-networkstate>networkState</a></code> attribute to the
        <code id=loading-the-media-resource:dom-media-network_empty-3><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> value, set the element's
        <a href=#show-poster-flag id=loading-the-media-resource:show-poster-flag-4>show poster flag</a> to true, and <a href=https://dom.spec.whatwg.org/#concept-event-fire id=loading-the-media-resource:concept-event-fire-20 data-x-internal=concept-event-fire>fire an
        event</a> named <code id=loading-the-media-resource:event-media-emptied-2><a href=#event-media-emptied>emptied</a></code> at the element.</p>

        <p>Otherwise, set the element's <code id=loading-the-media-resource:dom-media-networkstate-19><a href=#dom-media-networkstate>networkState</a></code>
        attribute to the <code id=loading-the-media-resource:dom-media-network_idle-8><a href=#dom-media-network_idle>NETWORK_IDLE</a></code> value.</p>
       <li><p>Set the element's <a href=#delaying-the-load-event-flag id=loading-the-media-resource:delaying-the-load-event-flag-13>delaying-the-load-event flag</a> to false. This stops <a href=parsing.html#delay-the-load-event id=loading-the-media-resource:delay-the-load-event-13>delaying the load event</a>.<li><p>Abort the overall <a href=#concept-media-load-algorithm id=loading-the-media-resource:concept-media-load-algorithm-6>resource selection
       algorithm</a>.</ol>
     <dt id=non-fatal-media-error>If the <a href=#media-data id=loading-the-media-resource:media-data-16>media data</a> can be fetched but has non-fatal
     errors or uses, in part, codecs that are unsupported, preventing the user agent from rendering
     the content completely correctly but not preventing playback altogether<dd>
      <p>The server returning data that is partially usable but cannot be optimally rendered must
      cause the user agent to render just the bits it can handle, and ignore the rest.</p>

      
     <dt id=found-a-media-resource-specific-timed-track>If the <a href=#media-resource id=loading-the-media-resource:media-resource-19>media resource</a> is
     found to declare a <a href=#media-resource-specific-text-track id=loading-the-media-resource:media-resource-specific-text-track-2>media-resource-specific text track</a> that the user agent
     supports<dd>
      <p>If the <a href=#media-data id=loading-the-media-resource:media-data-17>media data</a> is <a id=loading-the-media-resource:cors-same-origin-3 href=urls-and-fetching.html#cors-same-origin>CORS-same-origin</a>, run the <a href=#steps-to-expose-a-media-resource-specific-text-track id=loading-the-media-resource:steps-to-expose-a-media-resource-specific-text-track>steps to
      expose a media-resource-specific text track</a> with the relevant data.</p>

      <p class=note>Cross-origin videos do not expose their subtitles, since that would allow
      attacks such as hostile sites reading subtitles from confidential videos on a user's
      intranet.</p>
     </dl>
   <li><p><i>Final step</i>: If the user agent ever reaches this step (which can only happen if the entire resource
   gets loaded and kept available): abort the overall <a href=#concept-media-load-algorithm id=loading-the-media-resource:concept-media-load-algorithm-7>resource selection algorithm</a>.</ol>

  <p>When a <a href=#media-element id=loading-the-media-resource:media-element-71>media element</a> is to <dfn id="forget-the-media-element's-media-resource-specific-tracks">forget the media element's media-resource-specific
  tracks</dfn>, the user agent must remove from the <a href=#media-element id=loading-the-media-resource:media-element-72>media element</a>'s <a href=#list-of-text-tracks id=loading-the-media-resource:list-of-text-tracks>list of text
  tracks</a> all the <a href=#media-resource-specific-text-track id=loading-the-media-resource:media-resource-specific-text-track-3>media-resource-specific
  text tracks</a>, then empty the <a href=#media-element id=loading-the-media-resource:media-element-73>media element</a>'s <code id=loading-the-media-resource:dom-media-audiotracks-2><a href=#dom-media-audiotracks>audioTracks</a></code> attribute's <code id=loading-the-media-resource:audiotracklist-3><a href=#audiotracklist>AudioTrackList</a></code> object,
  then empty the <a href=#media-element id=loading-the-media-resource:media-element-74>media element</a>'s <code id=loading-the-media-resource:dom-media-videotracks-2><a href=#dom-media-videotracks>videoTracks</a></code>
  attribute's <code id=loading-the-media-resource:videotracklist-3><a href=#videotracklist>VideoTrackList</a></code> object. No events (in particular, no <code id=loading-the-media-resource:event-media-removetrack><a href=#event-media-removetrack>removetrack</a></code> events) are fired as part of this; the <code id=loading-the-media-resource:event-media-error-4><a href=#event-media-error>error</a></code> and <code id=loading-the-media-resource:event-media-emptied-3><a href=#event-media-emptied>emptied</a></code>
  events, fired by the algorithms that invoke this one, can be used instead.</p>

  

  <hr>

  <p>The <dfn data-dfn-for=audio,video id=attr-media-preload data-dfn-type=element-attr><code>preload</code></dfn>
  attribute is an <a id=loading-the-media-resource:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following keywords and
  states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=audio/preload,video/preload id=attr-media-preload-auto data-dfn-type=attr-value><code>auto</code></dfn>
     <td rowspan=2><dfn id=attr-media-preload-auto-state>Automatic</dfn>
     <td rowspan=2>Hints to the user agent that the user agent can put the user's needs first without risk to the server, up to and including optimistically downloading the entire resource.
    <tr><td>(the empty string)
    <tr><td><dfn data-dfn-for=audio/preload,video/preload id=attr-media-preload-none data-dfn-type=attr-value><code>none</code></dfn>
     <td><dfn id=attr-media-preload-none-state>None</dfn>
     <td>Hints to the user agent that either the author does not expect the user to need the media resource, or that the server wants to minimize unnecessary traffic.
         This state does not provide a hint regarding how aggressively to actually download the media resource if buffering starts anyway (e.g. once the user hits "play").
    <tr><td><dfn data-dfn-for=audio/preload,video/preload id=attr-media-preload-metadata data-dfn-type=attr-value><code>metadata</code></dfn>
     <td><dfn id=attr-media-preload-metadata-state>Metadata</dfn>
     <td>Hints to the user agent that the author does not expect the user to need the media resource, but that fetching the resource metadata (dimensions, track list, duration, etc.), and maybe even the first few frames, is reasonable. If the user agent precisely fetches no more than the metadata, then the <a href=#media-element id=loading-the-media-resource:media-element-75>media element</a> will end up with its <code id=loading-the-media-resource:dom-media-readystate-8><a href=#dom-media-readystate>readyState</a></code> attribute set to <code id=loading-the-media-resource:dom-media-have_metadata-2><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>; typically though, some frames will be obtained as well and it will probably be <code id=loading-the-media-resource:dom-media-have_current_data-2><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or <code id=loading-the-media-resource:dom-media-have_future_data><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code>.
         When the media resource is playing, hints to the user agent that bandwidth is to be considered scarce, e.g. suggesting throttling the download so that the media data is obtained at the slowest possible rate that still maintains consistent playback.
  </table>

  <p>The attribute's <i id=loading-the-media-resource:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=loading-the-media-resource:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both
  <a id=loading-the-media-resource:implementation-defined-4 href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a>, though the <a href=#attr-media-preload-metadata-state id=loading-the-media-resource:attr-media-preload-metadata-state>Metadata</a> state is suggested as a compromise
  between reducing server load and providing an optimal user experience.</p>

  <p>The attribute can be changed even once the <a href=#media-resource id=loading-the-media-resource:media-resource-20>media resource</a> is being buffered or
  played; the descriptions in the table above are to be interpreted with that in mind.</p>

  <p class=note>Authors might switch the attribute from "<code id=loading-the-media-resource:attr-media-preload-none-2><a href=#attr-media-preload-none>none</a></code>" or "<code id=loading-the-media-resource:attr-media-preload-metadata><a href=#attr-media-preload-metadata>metadata</a></code>" to "<code id=loading-the-media-resource:attr-media-preload-auto><a href=#attr-media-preload-auto>auto</a></code>" dynamically once the user begins playback. For
  example, on a page with many videos this might be used to indicate that the many videos are not to
  be downloaded unless requested, but that once one <em>is</em> requested it is to be downloaded
  aggressively.</p>

  

  <p>The <code id=loading-the-media-resource:attr-media-preload-3><a href=#attr-media-preload>preload</a></code> attribute is intended to provide a hint to
  the user agent about what the author thinks will lead to the best user experience. The attribute
  may be ignored altogether, for example based on explicit user preferences or based on the
  available connectivity.</p>

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-preload data-dfn-type=attribute><code>preload</code></dfn>
  IDL attribute must <a id=loading-the-media-resource:reflect href=common-dom-interfaces.html#reflect>reflect</a> the content attribute of the same name, <a id=loading-the-media-resource:limited-to-only-known-values href=common-dom-interfaces.html#limited-to-only-known-values>limited to
  only known values</a>.</p>

  

  <p class=note>The <code id=loading-the-media-resource:attr-media-autoplay-2><a href=#attr-media-autoplay>autoplay</a></code> attribute can override the
  <code id=loading-the-media-resource:attr-media-preload-4><a href=#attr-media-preload>preload</a></code> attribute (since if the media plays, it naturally
  has to buffer first, regardless of the hint given by the <code id=loading-the-media-resource:attr-media-preload-5><a href=#attr-media-preload>preload</a></code> attribute). Including both is not an error, however.</p>

  <hr>



  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-media-buffered id=dom-media-buffered-dev>buffered</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/buffered title="The buffered read-only property of HTMLMediaElement objects returns a new static normalized TimeRanges object that represents the ranges of the media resource, if any, that the user agent has buffered at the moment the buffered property is accessed.">HTMLMediaElement/buffered</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns a <code id=loading-the-media-resource:timeranges><a href=#timeranges>TimeRanges</a></code> object that represents the ranges of the <a href=#media-resource id=loading-the-media-resource:media-resource-21>media
    resource</a> that the user agent has buffered.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-buffered data-dfn-type=attribute><code>buffered</code></dfn> attribute must return a new static
  <a href=#normalised-timeranges-object id=loading-the-media-resource:normalised-timeranges-object>normalized <code>TimeRanges</code> object</a> that represents the ranges of the
  <a href=#media-resource id=loading-the-media-resource:media-resource-22>media resource</a>, if any, that the user agent has buffered, at the time the attribute
  is evaluated. User agents must accurately determine the ranges available, even for media streams
  where this can only be determined by tedious inspection.</p>

  <p class=note>Typically this will be a single range anchored at the zero point, but if, e.g. the
  user agent uses HTTP range requests in response to seeking, then there could be multiple
  ranges.</p>

  <p>User agents may discard previously buffered data.</p>

  <p class=note>Thus, a time position included within a range of the objects return by the <code id=loading-the-media-resource:dom-media-buffered><a href=#dom-media-buffered>buffered</a></code> attribute at one time can end up being not included in
  the range(s) of objects returned by the same attribute at later times.</p>

  <p class=warning>Returning a new object each time is a bad pattern for attribute getters and is
  only enshrined here as it would be costly to change it. It is not to be copied to new APIs.</p>

  



  <h5 id=offsets-into-the-media-resource><span class=secno>4.8.11.6</span> Offsets into the media resource<a href=#offsets-into-the-media-resource class=self-link></a></h5>

  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-media-duration id=dom-media-duration-dev>duration</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration title="The read-only HTMLMediaElement property duration indicates the length of the element's media in seconds.">HTMLMediaElement/duration</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the length of the <a href=#media-resource id=offsets-into-the-media-resource:media-resource>media resource</a>, in seconds, assuming that the start of
    the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-2>media resource</a> is at time zero.</p>

    <p>Returns NaN if the duration isn't available.</p>

    <p>Returns Infinity for unbounded streams.</p>
   <dt><code><var>media</var>.<a href=#dom-media-currenttime id=dom-media-currenttime-dev>currentTime</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime title="The HTMLMediaElement interface's currentTime property specifies the current playback time in seconds.">HTMLMediaElement/currentTime</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the <a href=#official-playback-position id=offsets-into-the-media-resource:official-playback-position>official playback position</a>, in seconds.</p>

    <p>Can be set, to seek to the given time.</p>
   </dl>

  

  <p>A <a href=#media-resource id=offsets-into-the-media-resource:media-resource-3>media resource</a> has a <dfn id=media-timeline>media timeline</dfn> that maps times (in seconds) to
  positions in the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-4>media resource</a>. The origin of a timeline is its earliest defined
  position. The duration of a timeline is its last defined position.</p>

  <p><dfn id=defineTimeline>Establishing the media
  timeline</dfn>: if the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-5>media resource</a> somehow specifies an explicit timeline whose
  origin is not negative (i.e. gives each frame a specific time offset and gives the first frame a
  zero or positive offset), then the <a href=#media-timeline id=offsets-into-the-media-resource:media-timeline>media timeline</a> should be that timeline. (Whether
  the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-6>media resource</a> can specify a timeline or not depends on the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-7>media resource's</a> format.) If the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-8>media resource</a> specifies an
  explicit start time <em>and date</em>, then that time and date should be considered the zero point
  in the <a href=#media-timeline id=offsets-into-the-media-resource:media-timeline-2>media timeline</a>; the <a href=#timeline-offset id=offsets-into-the-media-resource:timeline-offset>timeline offset</a> will be the time and date,
  exposed using the <code id=offsets-into-the-media-resource:dom-media-getstartdate><a href=#dom-media-getstartdate>getStartDate()</a></code> method.</p>

  <p>If the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-9>media resource</a> has a discontinuous timeline, the user agent must extend the
  timeline used at the start of the resource across the entire resource, so that the <a href=#media-timeline id=offsets-into-the-media-resource:media-timeline-3>media
  timeline</a> of the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-10>media resource</a> increases linearly starting from the
  <a href=#earliest-possible-position id=offsets-into-the-media-resource:earliest-possible-position>earliest possible position</a> (as defined below), even if the underlying <a href=#media-data id=offsets-into-the-media-resource:media-data>media
  data</a> has out-of-order or even overlapping time codes.</p>

  <p class=example>For example, if two clips have been concatenated into one video file, but the
  video format exposes the original times for the two clips, the video data might expose a timeline
  that goes, say, 00:15..00:29 and then 00:05..00:38. However, the user agent would not expose those
  times; it would instead expose the times as 00:15..00:29 and 00:29..01:02, as a single video.</p>

  <p>
  <a id=offsets-into-the-media-resource:tracking-vector title="There is a tracking vector here." href=https://infra.spec.whatwg.org/#tracking-vector class=tracking-vector data-x-internal=tracking-vector><img width=46 alt="(This is a tracking vector.)" crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/tracking-vector.svg height=64></a>
  In the rare case of a <a href=#media-resource id=offsets-into-the-media-resource:media-resource-11>media resource</a> that does not have an explicit timeline, the
  zero time on the <a href=#media-timeline id=offsets-into-the-media-resource:media-timeline-4>media timeline</a> should correspond to the first frame of the
  <a href=#media-resource id=offsets-into-the-media-resource:media-resource-12>media resource</a>. In the even rarer case of a <a href=#media-resource id=offsets-into-the-media-resource:media-resource-13>media resource</a> with no
  explicit timings of any kind, not even frame durations, the user agent must itself determine the
  time for each frame in an <a id=offsets-into-the-media-resource:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> manner.</p>

  <p class=note>An example of a file format with no explicit timeline but with explicit frame
  durations is the Animated GIF format. An example of a file format with no explicit timings at all
  is the JPEG-push format (<code id=offsets-into-the-media-resource:multipart/x-mixed-replace><a href=iana.html#multipart/x-mixed-replace>multipart/x-mixed-replace</a></code> with JPEG frames, often
  used as the format for MJPEG streams).</p>

  <p>If, in the case of a resource with no timing information, the user agent will nonetheless be
  able to seek to an earlier point than the first frame originally provided by the server, then the
  zero time should correspond to the earliest seekable time of the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-14>media resource</a>;
  otherwise, it should correspond to the first frame received from the server (the point in the
  <a href=#media-resource id=offsets-into-the-media-resource:media-resource-15>media resource</a> at which the user agent began receiving the stream).</p>

  <p class=note>At the time of writing, there is no known format that lacks explicit frame time
  offsets yet still supports seeking to a frame before the first frame sent by the server.</p>

  <div class=example>

   <p>Consider a stream from a TV broadcaster, which begins streaming on a sunny Friday afternoon in
   October, and always sends connecting user agents the media data on the same media timeline, with
   its zero time set to the start of this stream. Months later, user agents connecting to this
   stream will find that the first frame they receive has a time with millions of seconds. The <code id=offsets-into-the-media-resource:dom-media-getstartdate-2><a href=#dom-media-getstartdate>getStartDate()</a></code> method would always return the date that the
   broadcast started; this would allow controllers to display real times in their scrubber (e.g.
   "2:30pm") rather than a time relative to when the broadcast began ("8 months, 4 hours, 12
   minutes, and 23 seconds").</p>

   <p>Consider a stream that carries a video with several concatenated fragments, broadcast by a
   server that does not allow user agents to request specific times but instead just streams the
   video data in a predetermined order, with the first frame delivered always being identified as
   the frame with time zero. If a user agent connects to this stream and receives fragments defined
   as covering timestamps 2010-03-20 23:15:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 14:25:00
   UTC to 2010-02-12 14:35:00 UTC, it would expose this with a <a href=#media-timeline id=offsets-into-the-media-resource:media-timeline-5>media timeline</a> starting
   at 0s and extending to 3,600s (one hour). Assuming the streaming server disconnected at the end
   of the second clip, the <code id=offsets-into-the-media-resource:dom-media-duration><a href=#dom-media-duration>duration</a></code> attribute would then
   return 3,600. The <code id=offsets-into-the-media-resource:dom-media-getstartdate-3><a href=#dom-media-getstartdate>getStartDate()</a></code> method would return a
   <code id=offsets-into-the-media-resource:date><a data-x-internal=date href=https://tc39.es/ecma262/#sec-date-objects>Date</a></code> object with a time corresponding to 2010-03-20 23:15:00 UTC. However, if a
   different user agent connected five minutes later, <em>it</em> would (presumably) receive
   fragments covering timestamps 2010-03-20 23:20:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12
   14:25:00 UTC to 2010-02-12 14:35:00 UTC, and would expose this with a <a href=#media-timeline id=offsets-into-the-media-resource:media-timeline-6>media timeline</a>
   starting at 0s and extending to 3,300s (fifty five minutes). In this case, the <code id=offsets-into-the-media-resource:dom-media-getstartdate-4><a href=#dom-media-getstartdate>getStartDate()</a></code> method would return a <code id=offsets-into-the-media-resource:date-2><a data-x-internal=date href=https://tc39.es/ecma262/#sec-date-objects>Date</a></code> object
   with a time corresponding to 2010-03-20 23:20:00 UTC.</p>

   <p>In both of these examples, the <code id=offsets-into-the-media-resource:dom-media-seekable><a href=#dom-media-seekable>seekable</a></code> attribute
   would give the ranges that the controller would want to actually display in its UI; typically, if
   the servers don't support seeking to arbitrary times, this would be the range of time from the
   moment the user agent connected to the stream up to the latest frame that the user agent has
   obtained; however, if the user agent starts discarding earlier information, the actual range
   might be shorter.</p>

  </div>

  <p>In any case, the user agent must ensure that the <a href=#earliest-possible-position id=offsets-into-the-media-resource:earliest-possible-position-2>earliest possible position</a> (as
  defined below) using the established <a href=#media-timeline id=offsets-into-the-media-resource:media-timeline-7>media timeline</a>, is greater than or equal to
  zero.</p>

  <p>The <a href=#media-timeline id=offsets-into-the-media-resource:media-timeline-8>media timeline</a> also has an associated clock. Which clock is used is user-agent
  defined, and may be <a href=#media-resource id=offsets-into-the-media-resource:media-resource-16>media resource</a>-dependent, but it should approximate the user's
  wall clock.</p>

  <p><a href=#media-element id=offsets-into-the-media-resource:media-element>Media elements</a> have a <dfn id=current-playback-position>current playback position</dfn>,
  which must initially (i.e. in the absence of <a href=#media-data id=offsets-into-the-media-resource:media-data-2>media data</a>) be zero seconds. The
  <a href=#current-playback-position id=offsets-into-the-media-resource:current-playback-position>current playback position</a> is a time on the <a href=#media-timeline id=offsets-into-the-media-resource:media-timeline-9>media timeline</a>.</p>

  <p><a href=#media-element id=offsets-into-the-media-resource:media-element-2>Media elements</a> also have an <dfn id=official-playback-position>official playback
  position</dfn>, which must initially be set to zero seconds. The <a href=#official-playback-position id=offsets-into-the-media-resource:official-playback-position-2>official playback
  position</a> is an approximation of the <a href=#current-playback-position id=offsets-into-the-media-resource:current-playback-position-2>current playback position</a> that is kept
  stable while scripts are running.</p>

  <p><a href=#media-element id=offsets-into-the-media-resource:media-element-3>Media elements</a> also have a <dfn id=default-playback-start-position>default playback start
  position</dfn>, which must initially be set to zero seconds. This time is used to allow the
  element to be seeked even before the media is loaded.</p>

  <p>Each <a href=#media-element id=offsets-into-the-media-resource:media-element-4>media element</a> has a <dfn id=show-poster-flag>show poster flag</dfn>. When a <a href=#media-element id=offsets-into-the-media-resource:media-element-5>media
  element</a> is created, this flag must be set to true. This flag is used to control when the
  user agent is to show a poster frame for a <code id=offsets-into-the-media-resource:the-video-element><a href=#the-video-element>video</a></code> element instead of showing the video
  contents.</p>

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-currenttime data-dfn-type=attribute><code>currentTime</code></dfn> attribute must, on getting, return the
  <a href=#media-element id=offsets-into-the-media-resource:media-element-6>media element</a>'s <a href=#default-playback-start-position id=offsets-into-the-media-resource:default-playback-start-position>default playback start position</a>, unless that is zero, in
  which case it must return the element's <a href=#official-playback-position id=offsets-into-the-media-resource:official-playback-position-3>official playback position</a>. The returned
  value must be expressed in seconds. On setting, if the <a href=#media-element id=offsets-into-the-media-resource:media-element-7>media element</a>'s <code id=offsets-into-the-media-resource:dom-media-readystate><a href=#dom-media-readystate>readyState</a></code> is <code id=offsets-into-the-media-resource:dom-media-have_nothing><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, then it must set the <a href=#media-element id=offsets-into-the-media-resource:media-element-8>media
  element</a>'s <a href=#default-playback-start-position id=offsets-into-the-media-resource:default-playback-start-position-2>default playback start position</a> to the new value; otherwise, it must
  set the <a href=#official-playback-position id=offsets-into-the-media-resource:official-playback-position-4>official playback position</a> to the new value and then <a href=#dom-media-seek id=offsets-into-the-media-resource:dom-media-seek>seek</a> to the new value. The new value must be interpreted as being
  in seconds.</p>

  <p>If the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-17>media resource</a> is a streaming resource, then the user agent might be unable
  to obtain certain parts of the resource after it has expired from its buffer. Similarly, some
  <a href=#media-resource id=offsets-into-the-media-resource:media-resource-18>media resources</a> might have a <a href=#media-timeline id=offsets-into-the-media-resource:media-timeline-10>media timeline</a> that
  doesn't start at zero. The <dfn id=earliest-possible-position>earliest possible position</dfn> is the earliest position in the
  stream or resource that the user agent can ever obtain again. It is also a time on the <a href=#media-timeline id=offsets-into-the-media-resource:media-timeline-11>media
  timeline</a>.</p>

  <p class=note>The <a href=#earliest-possible-position id=offsets-into-the-media-resource:earliest-possible-position-3>earliest possible position</a> is not explicitly exposed in the API;
  it corresponds to the start time of the first range in the <code id=offsets-into-the-media-resource:dom-media-seekable-2><a href=#dom-media-seekable>seekable</a></code> attribute's <code id=offsets-into-the-media-resource:timeranges><a href=#timeranges>TimeRanges</a></code> object, if any, or
  the <a href=#current-playback-position id=offsets-into-the-media-resource:current-playback-position-3>current playback position</a> otherwise.</p>

  <p>When the <a href=#earliest-possible-position id=offsets-into-the-media-resource:earliest-possible-position-4>earliest possible position</a> changes, then: if the <a href=#current-playback-position id=offsets-into-the-media-resource:current-playback-position-4>current playback
  position</a> is before the <a href=#earliest-possible-position id=offsets-into-the-media-resource:earliest-possible-position-5>earliest possible position</a>, the user agent must <a href=#dom-media-seek id=offsets-into-the-media-resource:dom-media-seek-2>seek</a> to the <a href=#earliest-possible-position id=offsets-into-the-media-resource:earliest-possible-position-6>earliest possible position</a>; otherwise, if
  the user agent has not fired a <code id=offsets-into-the-media-resource:event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> event at
  the element in the past 15 to 250ms and is not still running event handlers for such an event,
  then the user agent must <a href=#queue-a-media-element-task id=offsets-into-the-media-resource:queue-a-media-element-task>queue a media element task</a> given the <a href=#media-element id=offsets-into-the-media-resource:media-element-9>media
  element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=offsets-into-the-media-resource:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=offsets-into-the-media-resource:event-media-timeupdate-2><a href=#event-media-timeupdate>timeupdate</a></code> at the element.</p>

  <p class=note>Because of the above requirement and the requirement in the <a href=#concept-media-load-resource id=offsets-into-the-media-resource:concept-media-load-resource>resource fetch algorithm</a> that kicks in <a href=#getting-media-metadata>when the metadata of the clip becomes known</a>, the <a href=#current-playback-position id=offsets-into-the-media-resource:current-playback-position-5>current
  playback position</a> can never be less than the <a href=#earliest-possible-position id=offsets-into-the-media-resource:earliest-possible-position-7>earliest possible position</a>.</p>

  
  

  <p>If at any time the user agent learns that an audio or video track has ended and all <a href=#media-data id=offsets-into-the-media-resource:media-data-3>media
  data</a> relating to that track corresponds to parts of the <a href=#media-timeline id=offsets-into-the-media-resource:media-timeline-12>media timeline</a> that
  are <em>before</em> the <a href=#earliest-possible-position id=offsets-into-the-media-resource:earliest-possible-position-8>earliest possible position</a>, the user agent may <a href=#queue-a-media-element-task id=offsets-into-the-media-resource:queue-a-media-element-task-2>queue a
  media element task</a> given the <a href=#media-element id=offsets-into-the-media-resource:media-element-10>media element</a> to run these steps:</p>

  <ol><li><p>Remove the track from the <code id=offsets-into-the-media-resource:dom-media-audiotracks><a href=#dom-media-audiotracks>audioTracks</a></code>
   attribute's <code id=offsets-into-the-media-resource:audiotracklist><a href=#audiotracklist>AudioTrackList</a></code> object or the <code id=offsets-into-the-media-resource:dom-media-videotracks><a href=#dom-media-videotracks>videoTracks</a></code> attribute's <code id=offsets-into-the-media-resource:videotracklist><a href=#videotracklist>VideoTrackList</a></code> object
   as appropriate.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=offsets-into-the-media-resource:concept-event-fire-2 data-x-internal=concept-event-fire>Fire an event</a> named <code id=offsets-into-the-media-resource:event-media-removetrack><a href=#event-media-removetrack>removetrack</a></code> at the <a href=#media-element id=offsets-into-the-media-resource:media-element-11>media element</a>'s
   aforementioned <code id=offsets-into-the-media-resource:audiotracklist-2><a href=#audiotracklist>AudioTrackList</a></code> or <code id=offsets-into-the-media-resource:videotracklist-2><a href=#videotracklist>VideoTrackList</a></code> object, using
   <code id=offsets-into-the-media-resource:trackevent><a href=#trackevent>TrackEvent</a></code>, with the <code id=offsets-into-the-media-resource:dom-trackevent-track><a href=#dom-trackevent-track>track</a></code> attribute
   initialized to the <code id=offsets-into-the-media-resource:audiotrack><a href=#audiotrack>AudioTrack</a></code> or <code id=offsets-into-the-media-resource:videotrack><a href=#videotrack>VideoTrack</a></code> object representing the
   track.</ol>

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-duration data-dfn-type=attribute><code>duration</code></dfn> attribute must return the time of the end of the
  <a href=#media-resource id=offsets-into-the-media-resource:media-resource-19>media resource</a>, in seconds, on the <a href=#media-timeline id=offsets-into-the-media-resource:media-timeline-13>media timeline</a>. If no <a href=#media-data id=offsets-into-the-media-resource:media-data-4>media
  data</a> is available, then the attributes must return the Not-a-Number (NaN) value. If the
  <a href=#media-resource id=offsets-into-the-media-resource:media-resource-20>media resource</a> is not known to be bounded (e.g. streaming radio, or a live event with
  no announced end time), then the attribute must return the positive Infinity value.</p>

  <p>The user agent must determine the duration of the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-21>media resource</a> before playing
  any part of the <a href=#media-data id=offsets-into-the-media-resource:media-data-5>media data</a> and before setting <code id=offsets-into-the-media-resource:dom-media-readystate-2><a href=#dom-media-readystate>readyState</a></code> to a value greater than or equal to <code id=offsets-into-the-media-resource:dom-media-have_metadata><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, even if doing so requires fetching multiple
  parts of the resource.</p>

  <p id=durationChange>When the length of the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-22>media resource</a> changes to a known value
  (e.g. from being unknown to known, or from a previously established length to a new length), the
  user agent must <a href=#queue-a-media-element-task id=offsets-into-the-media-resource:queue-a-media-element-task-3>queue a media element task</a> given the <a href=#media-element id=offsets-into-the-media-resource:media-element-12>media element</a> to
  <a href=https://dom.spec.whatwg.org/#concept-event-fire id=offsets-into-the-media-resource:concept-event-fire-3 data-x-internal=concept-event-fire>fire an event</a> named <code id=offsets-into-the-media-resource:event-media-durationchange><a href=#event-media-durationchange>durationchange</a></code> at the <a href=#media-element id=offsets-into-the-media-resource:media-element-13>media element</a>. (The
  event is not fired when the duration is reset as part of loading a new media resource.) If the
  duration is changed such that the <a href=#current-playback-position id=offsets-into-the-media-resource:current-playback-position-6>current playback position</a> ends up being greater
  than the time of the end of the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-23>media resource</a>, then the user agent must also <a href=#dom-media-seek id=offsets-into-the-media-resource:dom-media-seek-3>seek</a> to the time of the end of the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-24>media resource</a>.</p>

  <p class=example>If an "infinite" stream ends for some reason, then the duration would change
  from positive Infinity to the time of the last frame or sample in the stream, and the <code id=offsets-into-the-media-resource:event-media-durationchange-2><a href=#event-media-durationchange>durationchange</a></code> event would be fired. Similarly, if the
  user agent initially estimated the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-25>media resource</a>'s duration instead of determining
  it precisely, and later revises the estimate based on new information, then the duration would
  change and the <code id=offsets-into-the-media-resource:event-media-durationchange-3><a href=#event-media-durationchange>durationchange</a></code> event would be
  fired.</p>

  <p>Some video files also have an explicit date and time corresponding to the zero time in the
  <a href=#media-timeline id=offsets-into-the-media-resource:media-timeline-14>media timeline</a>, known as the <dfn id=timeline-offset>timeline offset</dfn>. Initially, the
  <a href=#timeline-offset id=offsets-into-the-media-resource:timeline-offset-2>timeline offset</a> must be set to Not-a-Number (NaN).</p>

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-getstartdate data-dfn-type=method><code>getStartDate()</code></dfn> method must return <a href=infrastructure.html#create-a-date-object id=offsets-into-the-media-resource:create-a-date-object>a new <code>Date</code> object</a> representing the current
  <a href=#timeline-offset id=offsets-into-the-media-resource:timeline-offset-3>timeline offset</a>.</p>

  

  <hr>

  <p>The <dfn data-dfn-for=audio,video id=attr-media-loop data-dfn-type=element-attr><code>loop</code></dfn>
  attribute is a <a id=offsets-into-the-media-resource:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a> that, if specified, indicates that the <a href=#media-element id=offsets-into-the-media-resource:media-element-14>media
  element</a> is to seek back to the start of the <a href=#media-resource id=offsets-into-the-media-resource:media-resource-26>media resource</a> upon reaching the
  end.</p>



  <h5 id=ready-states><span class=secno>4.8.11.7</span> Ready states<a href=#ready-states class=self-link></a></h5>

  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-media-readystate id=dom-media-readystate-dev>readyState</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState title="The HTMLMediaElement.readyState property indicates the readiness state of the media.">HTMLMediaElement/readyState</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns a value that expresses the current state of the element with respect to rendering the
    <a href=#current-playback-position id=ready-states:current-playback-position>current playback position</a>, from the codes in the list below.</p>
   </dl>

  

  <p><a href=#media-element id=ready-states:media-element>Media elements</a> have a <i>ready state</i>, which describes to
  what degree they are ready to be rendered at the <a href=#current-playback-position id=ready-states:current-playback-position-2>current playback position</a>. The
  possible values are as follows; the ready state of a media element at any particular time is the
  greatest value describing the state of the element:</p>

  

  <dl><dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-have_nothing data-dfn-type=const><code>HAVE_NOTHING</code></dfn> (numeric value 0)<dd><p>No information regarding the <a href=#media-resource id=ready-states:media-resource>media resource</a> is available. No data for the
   <a href=#current-playback-position id=ready-states:current-playback-position-3>current playback position</a> is available. <a href=#media-element id=ready-states:media-element-2>Media
   elements</a> whose <code id=ready-states:dom-media-networkstate><a href=#dom-media-networkstate>networkState</a></code> attribute are set
   to <code id=ready-states:dom-media-network_empty><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> are always in the <code id=ready-states:dom-media-have_nothing><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> state.<dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-have_metadata data-dfn-type=const><code>HAVE_METADATA</code></dfn> (numeric value 1)<dd><p>Enough of the resource has been obtained that the duration of the resource is available.
   In the case of a <code id=ready-states:the-video-element><a href=#the-video-element>video</a></code> element, the dimensions of the video are also available. No
   <a href=#media-data id=ready-states:media-data>media data</a> is available for the immediate <a href=#current-playback-position id=ready-states:current-playback-position-4>current playback
   position</a>.<dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-have_current_data data-dfn-type=const><code>HAVE_CURRENT_DATA</code></dfn> (numeric value 2)<dd><p>Data for the immediate <a href=#current-playback-position id=ready-states:current-playback-position-5>current playback position</a> is available, but either not
   enough data is available that the user agent could successfully advance the <a href=#current-playback-position id=ready-states:current-playback-position-6>current
   playback position</a> in the <a href=#direction-of-playback id=ready-states:direction-of-playback>direction of playback</a> at all without immediately
   reverting to the <code id=ready-states:dom-media-have_metadata><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> state, or there is no
   more data to obtain in the <a href=#direction-of-playback id=ready-states:direction-of-playback-2>direction of playback</a>. For example, in video this
   corresponds to the user agent having data from the current frame, but not the next frame, when
   the <a href=#current-playback-position id=ready-states:current-playback-position-7>current playback position</a> is at the end of the current frame; and to when <a href=#ended-playback id=ready-states:ended-playback>playback has ended</a>.<dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-have_future_data data-dfn-type=const><code>HAVE_FUTURE_DATA</code></dfn> (numeric value 3)<dd><p>Data for the immediate <a href=#current-playback-position id=ready-states:current-playback-position-8>current playback position</a> is available, as well as
   enough data for the user agent to advance the <a href=#current-playback-position id=ready-states:current-playback-position-9>current playback position</a> in the
   <a href=#direction-of-playback id=ready-states:direction-of-playback-3>direction of playback</a> at least a little without immediately reverting to the <code id=ready-states:dom-media-have_metadata-2><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> state, and <a href=#the-text-tracks-are-ready id=ready-states:the-text-tracks-are-ready>the text tracks are
   ready</a>. For example, in video this corresponds to the user agent having data for at least
   the current frame and the next frame when the <a href=#current-playback-position id=ready-states:current-playback-position-10>current playback position</a> is at the
   instant in time between the two frames, or to the user agent having the video data for the
   current frame and audio data to keep playing at least a little when the <a href=#current-playback-position id=ready-states:current-playback-position-11>current playback
   position</a> is in the middle of a frame. The user agent cannot be in this state if <a href=#ended-playback id=ready-states:ended-playback-2>playback has ended</a>, as the <a href=#current-playback-position id=ready-states:current-playback-position-12>current playback position</a>
   can never advance in this case.<dt><dfn data-dfn-for=HTMLMediaElement id=dom-media-have_enough_data data-dfn-type=const><code>HAVE_ENOUGH_DATA</code></dfn> (numeric value 4)<dd>
   <p>All the conditions described for the <code id=ready-states:dom-media-have_future_data><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> state are met, and, in addition,
    either of the following conditions is also true:</p>

    <ul><li>The user agent estimates that data is being fetched at a rate where the <a href=#current-playback-position id=ready-states:current-playback-position-13>current
     playback position</a>, if it were to advance at the element's <code id=ready-states:dom-media-playbackrate><a href=#dom-media-playbackrate>playbackRate</a></code>, would not overtake the available data
     before playback reaches the end of the <a href=#media-resource id=ready-states:media-resource-2>media resource</a>.<li>The user agent has entered a state where waiting longer will not result in further data
     being obtained, and therefore nothing would be gained by delaying playback any further. (For
     example, the buffer might be full.)</ul>
   </dl>

  <p class=note>In practice, the difference between <code id=ready-states:dom-media-have_metadata-3><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> and <code id=ready-states:dom-media-have_current_data><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> is negligible. Really the only time
  the difference is relevant is when painting a <code id=ready-states:the-video-element-2><a href=#the-video-element>video</a></code> element onto a
  <code id=ready-states:the-canvas-element><a href=canvas.html#the-canvas-element>canvas</a></code>, where it distinguishes the case where something will be drawn (<code id=ready-states:dom-media-have_current_data-2><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or greater) from the case where
  nothing is drawn (<code id=ready-states:dom-media-have_metadata-4><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> or less). Similarly,
  the difference between <code id=ready-states:dom-media-have_current_data-3><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> (only
  the current frame) and <code id=ready-states:dom-media-have_future_data-2><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> (at least
  this frame and the next) can be negligible (in the extreme, only one frame). The only time that
  distinction really matters is when a page provides an interface for "frame-by-frame"
  navigation.</p>

  

  <p>When the ready state of a <a href=#media-element id=ready-states:media-element-3>media element</a> whose <code id=ready-states:dom-media-networkstate-2><a href=#dom-media-networkstate>networkState</a></code> is not <code id=ready-states:dom-media-network_empty-2><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> changes, the user agent must follow the steps
  given below:</p>

  <ol><li>
    <p>Apply the first applicable set of substeps from the following list:</p>


    <dl class=switch><dt>If the previous ready state was <code id=ready-states:dom-media-have_nothing-2><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>,
     and the new ready state is <code id=ready-states:dom-media-have_metadata-5><a href=#dom-media-have_metadata>HAVE_METADATA</a></code><dd id=fire-loadedmetadata>

      <p><a href=#queue-a-media-element-task id=ready-states:queue-a-media-element-task>Queue a media element task</a> given the <a href=#media-element id=ready-states:media-element-4>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=ready-states:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=ready-states:event-media-loadedmetadata><a href=#event-media-loadedmetadata>loadedmetadata</a></code> at the element.</p>

      <p class=note>Before this task is run, as part of the <a id=ready-states:event-loop href=webappapis.html#event-loop>event loop</a> mechanism, the
      rendering will have been updated to resize the <code id=ready-states:the-video-element-3><a href=#the-video-element>video</a></code> element if appropriate.</p>
     <dt id=handling-first-frame-available>If the previous ready state was <code id=ready-states:dom-media-have_metadata-6><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> and the new ready state is <code id=ready-states:dom-media-have_current_data-4><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or greater<dd>
      <p id=fire-loadeddata>If this is the first time this occurs for this <a href=#media-element id=ready-states:media-element-5>media
      element</a> since the <code id=ready-states:dom-media-load><a href=#dom-media-load>load()</a></code> algorithm was last
      invoked, the user agent must <a href=#queue-a-media-element-task id=ready-states:queue-a-media-element-task-2>queue a media element task</a> given the <a href=#media-element id=ready-states:media-element-6>media
      element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=ready-states:concept-event-fire-2 data-x-internal=concept-event-fire>fire an event</a> named <code id=ready-states:event-media-loadeddata><a href=#event-media-loadeddata>loadeddata</a></code> at the element.</p>

      <p>If the new ready state is <code id=ready-states:dom-media-have_future_data-3><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code>
      or <code id=ready-states:dom-media-have_enough_data><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code>, then the relevant steps
      below must then be run also.</p>
     <dt>If the previous ready state was <code id=ready-states:dom-media-have_future_data-4><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or more, and the new ready state is
     <code id=ready-states:dom-media-have_current_data-5><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or less<dd>
      <p id=fire-waiting-when-waiting>If the <a href=#media-element id=ready-states:media-element-7>media element</a> was <a href=#potentially-playing id=ready-states:potentially-playing>potentially
      playing</a> before its <code id=ready-states:dom-media-readystate><a href=#dom-media-readystate>readyState</a></code> attribute
      changed to a value lower than <code id=ready-states:dom-media-have_future_data-5><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code>, and the element has not
      <a href=#ended-playback id=ready-states:ended-playback-3>ended playback</a>, and playback has not <a href=#stopped-due-to-errors id=ready-states:stopped-due-to-errors>stopped due to errors</a>,
      <a href=#paused-for-user-interaction id=ready-states:paused-for-user-interaction>paused for user interaction</a>, or <a href=#paused-for-in-band-content id=ready-states:paused-for-in-band-content>paused for in-band content</a>, the user
      agent must <a href=#queue-a-media-element-task id=ready-states:queue-a-media-element-task-3>queue a media element task</a> given the <a href=#media-element id=ready-states:media-element-8>media element</a> to
      <a href=https://dom.spec.whatwg.org/#concept-event-fire id=ready-states:concept-event-fire-3 data-x-internal=concept-event-fire>fire an event</a> named <code id=ready-states:event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the element, and <a href=#queue-a-media-element-task id=ready-states:queue-a-media-element-task-4>queue a media
      element task</a> given the <a href=#media-element id=ready-states:media-element-9>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=ready-states:concept-event-fire-4 data-x-internal=concept-event-fire>fire an event</a> named <code id=ready-states:event-media-waiting><a href=#event-media-waiting>waiting</a></code> at the element.</p>
     <dt>If the previous ready state was <code id=ready-states:dom-media-have_current_data-6><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or less, and the new ready state
     is <code id=ready-states:dom-media-have_future_data-6><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code><dd>
      <p>The user agent must <a href=#queue-a-media-element-task id=ready-states:queue-a-media-element-task-5>queue a media element task</a> given the <a href=#media-element id=ready-states:media-element-10>media
      element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=ready-states:concept-event-fire-5 data-x-internal=concept-event-fire>fire an event</a> named <code id=ready-states:event-media-canplay><a href=#event-media-canplay>canplay</a></code> at the element.</p>

      <p>If the element's <code id=ready-states:dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute is false, the user
      agent must <a href=#notify-about-playing id=ready-states:notify-about-playing>notify about playing</a> for the element.</p>
     <dt>If the new ready state is <code id=ready-states:dom-media-have_enough_data-2><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code><dd>
      <p>If the previous ready state was <code id=ready-states:dom-media-have_current_data-7><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or less, the user agent must
      <a href=#queue-a-media-element-task id=ready-states:queue-a-media-element-task-6>queue a media element task</a> given the <a href=#media-element id=ready-states:media-element-11>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=ready-states:concept-event-fire-6 data-x-internal=concept-event-fire>fire an event</a> named <code id=ready-states:event-media-canplay-2><a href=#event-media-canplay>canplay</a></code> at the element, and, if the element's <code id=ready-states:dom-media-paused-2><a href=#dom-media-paused>paused</a></code> attribute is false, <a href=#notify-about-playing id=ready-states:notify-about-playing-2>notify about playing</a>
      for the element.</p>

      <p>The user agent must <a href=#queue-a-media-element-task id=ready-states:queue-a-media-element-task-7>queue a media element task</a> given the <a href=#media-element id=ready-states:media-element-12>media
      element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=ready-states:concept-event-fire-7 data-x-internal=concept-event-fire>fire an event</a> named <code id=ready-states:event-media-canplaythrough><a href=#event-media-canplaythrough>canplaythrough</a></code> at the element.</p>

      <p>If the element is not <a href=#eligible-for-autoplay id=ready-states:eligible-for-autoplay>eligible for autoplay</a>, then the user agent must abort
      these substeps.</p>

      <p>The user agent may run the following substeps:</p>

      <ol><li>Set the <code id=ready-states:dom-media-paused-3><a href=#dom-media-paused>paused</a></code> attribute to false.<li>If the element's <a href=#show-poster-flag id=ready-states:show-poster-flag>show poster flag</a> is true, set it to false and run the
       <i id=ready-states:time-marches-on><a href=#time-marches-on>time marches on</a></i> steps.<li><a href=#queue-a-media-element-task id=ready-states:queue-a-media-element-task-8>Queue a media element task</a> given the element to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=ready-states:concept-event-fire-8 data-x-internal=concept-event-fire>fire an event</a> named <code id=ready-states:event-media-play><a href=#event-media-play>play</a></code> at the element.<li><a href=#notify-about-playing id=ready-states:notify-about-playing-3>Notify about playing</a> for the element.</ol>

      <p>Alternatively, if the element is a <code id=ready-states:the-video-element-4><a href=#the-video-element>video</a></code> element, the user agent may start
      observing whether the element <a href=rendering.html#intersect-the-viewport id=ready-states:intersect-the-viewport>intersects the
      viewport</a>. When the element starts <a href=rendering.html#intersect-the-viewport id=ready-states:intersect-the-viewport-2>intersecting
      the viewport</a>, if the element is still <a href=#eligible-for-autoplay id=ready-states:eligible-for-autoplay-2>eligible for autoplay</a>, run the
      substeps above. Optionally, when the element stops <a href=rendering.html#intersect-the-viewport id=ready-states:intersect-the-viewport-3>intersecting the viewport</a>, if the <a href=#can-autoplay-flag id=ready-states:can-autoplay-flag>can autoplay flag</a> is still
      true and the <code id=ready-states:attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute is still specified,
      run the following substeps:</p>

      <ol><li>Run the <a href=#internal-pause-steps id=ready-states:internal-pause-steps>internal pause steps</a> and set the <a href=#can-autoplay-flag id=ready-states:can-autoplay-flag-2>can autoplay flag</a> to
       true.<li><a href=#queue-a-media-element-task id=ready-states:queue-a-media-element-task-9>Queue a media element task</a> given the element to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=ready-states:concept-event-fire-9 data-x-internal=concept-event-fire>fire an event</a> named <code id=ready-states:event-media-pause><a href=#event-media-pause>pause</a></code> at the element.</ol>

      <p class=note>The substeps for playing and pausing can run multiple times as the element
      starts or stops <a href=rendering.html#intersect-the-viewport id=ready-states:intersect-the-viewport-4>intersecting the viewport</a>, as
      long as the <a href=#can-autoplay-flag id=ready-states:can-autoplay-flag-3>can autoplay flag</a> is true.</p>

      <p class=note>User agents do not need to support autoplay, and it is suggested that user
      agents honor user preferences on the matter. Authors are urged to use the <code id=ready-states:attr-media-autoplay-2><a href=#attr-media-autoplay>autoplay</a></code> attribute rather than using script to force the
      video to play, so as to allow the user to override the behavior if so desired.</p>
     </dl>
   </ol>

  

  <p class=note>It is possible for the ready state of a media element to jump between these states
  discontinuously. For example, the state of a media element can jump straight from <code id=ready-states:dom-media-have_metadata-7><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> to <code id=ready-states:dom-media-have_enough_data-3><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code> without passing through the <code id=ready-states:dom-media-have_current_data-8><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> and <code id=ready-states:dom-media-have_future_data-7><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> states.</p>

  

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-readystate data-dfn-type=attribute><code>readyState</code></dfn> IDL attribute must, on getting, return the
  value described above that describes the current ready state of the <a href=#media-element id=ready-states:media-element-13>media
  element</a>.</p>

  

  <p>The <dfn data-dfn-for=audio,video id=attr-media-autoplay data-dfn-type=element-attr><code>autoplay</code></dfn> attribute is a <a id=ready-states:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>.
  When present, the user agent (as described in the algorithm described herein)
  will automatically begin playback of the <a href=#media-resource id=ready-states:media-resource-3>media resource</a> as soon as it can do so
  without stopping.</p>

  <p class=note>Authors are urged to use the <code id=ready-states:attr-media-autoplay-3><a href=#attr-media-autoplay>autoplay</a></code>
  attribute rather than using script to trigger automatic playback, as this allows the user to
  override the automatic playback when it is not desired, e.g. when using a screen reader. Authors
  are also encouraged to consider not using the automatic playback behavior at all, and instead to
  let the user agent wait for the user to start playback explicitly.</p>



  <h5 id=playing-the-media-resource><span class=secno>4.8.11.8</span> Playing the media resource<a href=#playing-the-media-resource class=self-link></a></h5>

  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-media-paused id=dom-media-paused-dev>paused</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused title="The read-only HTMLMediaElement.paused property tells whether the media element is paused.">HTMLMediaElement/paused</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Returns true if playback is paused; false otherwise.<dt><code><var>media</var>.<a href=#dom-media-ended id=dom-media-ended-dev>ended</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended title="The HTMLMediaElement.ended property indicates whether the media element has ended playback.">HTMLMediaElement/ended</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Returns true if playback has reached the end of the <a href=#media-resource id=playing-the-media-resource:media-resource>media resource</a>.<dt><code><var>media</var>.<a href=#dom-media-defaultplaybackrate id=dom-media-defaultplaybackrate-dev>defaultPlaybackRate</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultPlaybackRate title="The HTMLMediaElement.defaultPlaybackRate property indicates the default playback rate for the media.">HTMLMediaElement/defaultPlaybackRate</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>20+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the default rate of playback, for when the user is not fast-forwarding or reversing
    through the <a href=#media-resource id=playing-the-media-resource:media-resource-2>media resource</a>.</p>

    <p>Can be set, to change the default rate of playback.</p>

    <p>The default rate has no direct effect on playback, but if the user switches to a fast-forward
    mode, when they return to the normal playback mode, it is expected that the rate of playback
    will be returned to the default rate of playback.</p>
   <dt><code><var>media</var>.<a href=#dom-media-playbackrate id=dom-media-playbackrate-dev>playbackRate</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate title="The HTMLMediaElement.playbackRate property sets the rate at which the media is being played back. This is used to implement user controls for fast forward, slow motion, and so forth. The normal playback rate is multiplied by this value to obtain the current rate, so a value of 1.0 indicates normal speed.">HTMLMediaElement/playbackRate</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>20+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the current rate playback, where 1.0 is normal speed.</p>

    <p>Can be set, to change the rate of playback.</p>
   <dt><code><var>media</var>.<a href=#dom-media-preservespitch id=dom-media-preservespitch-dev>preservesPitch</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/preservesPitch title="The HTMLMediaElement.preservesPitch property determines whether or not the browser should adjust the pitch of the audio to compensate for changes to the playback rate made by setting HTMLMediaElement.playbackRate.">HTMLMediaElement/preservesPitch</a><div class=support><span class="firefox yes"><span>Firefox</span><span>101+</span></span><span class="safari yes"><span>Safari</span><span title="Requires a prefix or alternative name.">🔰 4+</span></span><span class="chrome yes"><span>Chrome</span><span>86+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>86+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span title="Requires a prefix or alternative name.">🔰 4+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns true if pitch-preserving algorithms are used when the <code id=playing-the-media-resource:dom-media-playbackrate><a href=#dom-media-playbackrate>playbackRate</a></code> is not 1.0. The default value is true.</p>

    <p>Can be set to false to have the <a href=#media-resource id=playing-the-media-resource:media-resource-3>media resource</a>'s audio pitch change up or down
    depending on the <code id=playing-the-media-resource:dom-media-playbackrate-2><a href=#dom-media-playbackrate>playbackRate</a></code>. This is useful for
    aesthetic and performance reasons.</p>
   <dt><code><var>media</var>.<a href=#dom-media-played id=dom-media-played-dev>played</a></code><dd>
    <p>Returns a <code id=playing-the-media-resource:timeranges><a href=#timeranges>TimeRanges</a></code> object that represents the ranges of the <a href=#media-resource id=playing-the-media-resource:media-resource-4>media
    resource</a> that the user agent has played.</p>
   <dt><code><var>media</var>.<a href=#dom-media-play id=dom-media-play-dev>play</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play title="The HTMLMediaElement play() method attempts to begin playback of the media. It returns a Promise which is resolved when playback has been successfully started.">HTMLMediaElement/play</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dd>
    <p>Sets the <code id=playing-the-media-resource:dom-media-paused><a href=#dom-media-paused>paused</a></code> attribute to false, loading the
    <a href=#media-resource id=playing-the-media-resource:media-resource-5>media resource</a> and beginning playback if necessary. If the playback had ended, will
    restart it from the start.</p>
   <dt><code><var>media</var>.<a href=#dom-media-pause id=dom-media-pause-dev>pause</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause title="The HTMLMediaElement.pause() method will pause playback of the media, if the media is already in a paused state this method will have no effect.">HTMLMediaElement/pause</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Sets the <code id=playing-the-media-resource:dom-media-paused-2><a href=#dom-media-paused>paused</a></code> attribute to true, loading the
    <a href=#media-resource id=playing-the-media-resource:media-resource-6>media resource</a> if necessary.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-paused data-dfn-type=attribute><code>paused</code></dfn>
  attribute represents whether the <a href=#media-element id=playing-the-media-resource:media-element>media element</a> is paused or not. The attribute must
  initially be true.</p>

  <p>A <a href=#media-element id=playing-the-media-resource:media-element-2>media element</a> is a <dfn id=blocked-media-element>blocked media element</dfn> if its <code id=playing-the-media-resource:dom-media-readystate><a href=#dom-media-readystate>readyState</a></code> attribute is in the <code id=playing-the-media-resource:dom-media-have_nothing><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code> state, the <code id=playing-the-media-resource:dom-media-have_metadata><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> state, or the <code id=playing-the-media-resource:dom-media-have_current_data><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> state, or if the element has
  <a href=#paused-for-user-interaction id=playing-the-media-resource:paused-for-user-interaction>paused for user interaction</a> or <a href=#paused-for-in-band-content id=playing-the-media-resource:paused-for-in-band-content>paused for in-band content</a>.</p>

  <p>A <a href=#media-element id=playing-the-media-resource:media-element-3>media element</a> is said to be <dfn data-dfn-for="media element" id=potentially-playing data-export="">potentially
  playing</dfn> when its <code id=playing-the-media-resource:dom-media-paused-3><a href=#dom-media-paused>paused</a></code> attribute is false, the
  element has not <a href=#ended-playback id=playing-the-media-resource:ended-playback>ended playback</a>, playback has not <a href=#stopped-due-to-errors id=playing-the-media-resource:stopped-due-to-errors>stopped due to errors</a>,
  and the element is not a <a href=#blocked-media-element id=playing-the-media-resource:blocked-media-element>blocked media element</a>.</p>

  <p class=note>A <code id=playing-the-media-resource:event-media-waiting><a href=#event-media-waiting>waiting</a></code> DOM event <a href=#fire-waiting-when-waiting>can be fired</a> as a result of an element that is
  <a href=#potentially-playing id=playing-the-media-resource:potentially-playing>potentially playing</a> stopping playback due to its <code id=playing-the-media-resource:dom-media-readystate-2><a href=#dom-media-readystate>readyState</a></code> attribute changing to a value lower than <code id=playing-the-media-resource:dom-media-have_future_data><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code>.</p>

  <p>A <a href=#media-element id=playing-the-media-resource:media-element-4>media element</a> is said to be <dfn id=eligible-for-autoplay>eligible for autoplay</dfn> when all of the
  following are true:</p>

  <ul><li><p>its <a href=#can-autoplay-flag id=playing-the-media-resource:can-autoplay-flag>can autoplay flag</a> is true;<li><p>its <code id=playing-the-media-resource:dom-media-paused-4><a href=#dom-media-paused>paused</a></code> attribute is true;<li><p>it has an <code id=playing-the-media-resource:attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute
   specified;<li><p>its <a id=playing-the-media-resource:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a id=playing-the-media-resource:active-sandboxing-flag-set href=browsers.html#active-sandboxing-flag-set>active sandboxing flag set</a> does not have
   the <a id=playing-the-media-resource:sandboxed-automatic-features-browsing-context-flag href=browsers.html#sandboxed-automatic-features-browsing-context-flag>sandboxed automatic features browsing context flag</a> set; and<li><p>its <a id=playing-the-media-resource:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is <a id=playing-the-media-resource:allowed-to-use href=iframe-embed-object.html#allowed-to-use>allowed to use</a> the "<code id=playing-the-media-resource:autoplay-feature><a href=infrastructure.html#autoplay-feature>autoplay</a></code>" feature.</ul>

  <p>A <a href=#media-element id=playing-the-media-resource:media-element-5>media element</a> is said to be <dfn id=allowed-to-play>allowed to play</dfn> if the user agent and the
  system allow media playback in the current context.</p>

  <p class=example>For example, a user agent could allow playback only when the <a href=#media-element id=playing-the-media-resource:media-element-6>media
  element</a>'s <code id=playing-the-media-resource:window><a href=nav-history-apis.html#window>Window</a></code> object has <a id=playing-the-media-resource:transient-activation href=interaction.html#transient-activation>transient activation</a>, but an
  exception could be made to allow playback while <a href=#concept-media-muted id=playing-the-media-resource:concept-media-muted>muted</a>.</p>

  <p>A <a href=#media-element id=playing-the-media-resource:media-element-7>media element</a> is said to have <dfn id=ended-playback>ended playback</dfn> when:</p>

  <ul><li><p>The element's <code id=playing-the-media-resource:dom-media-readystate-3><a href=#dom-media-readystate>readyState</a></code> attribute is <code id=playing-the-media-resource:dom-media-have_metadata-2><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> or greater, and</p>

   <li>
    <p>Either:</p>

    <ul><li><p>The <a href=#current-playback-position id=playing-the-media-resource:current-playback-position>current playback position</a> is the end of the <a href=#media-resource id=playing-the-media-resource:media-resource-7>media
     resource</a>, and<li><p>The <a href=#direction-of-playback id=playing-the-media-resource:direction-of-playback>direction of playback</a> is forwards, and<li><p>The <a href=#media-element id=playing-the-media-resource:media-element-8>media element</a> does not have a <code id=playing-the-media-resource:attr-media-loop><a href=#attr-media-loop>loop</a></code> attribute specified.</ul>

    <p>Or:</p>

    <ul><li><p>The <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-2>current playback position</a> is the <a href=#earliest-possible-position id=playing-the-media-resource:earliest-possible-position>earliest possible
     position</a>, and<li><p>The <a href=#direction-of-playback id=playing-the-media-resource:direction-of-playback-2>direction of playback</a> is backwards.</ul>
   </ul>

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-ended data-dfn-type=attribute><code>ended</code></dfn>
  attribute must return true if, the last time the <a id=playing-the-media-resource:event-loop href=webappapis.html#event-loop>event loop</a> reached <a href=webappapis.html#step1>step 1</a>, the <a href=#media-element id=playing-the-media-resource:media-element-9>media element</a> had <a href=#ended-playback id=playing-the-media-resource:ended-playback-2>ended playback</a> and the
  <a href=#direction-of-playback id=playing-the-media-resource:direction-of-playback-3>direction of playback</a> was forwards, and false otherwise.</p>

  <p>A <a href=#media-element id=playing-the-media-resource:media-element-10>media element</a> is said to have <dfn id=stopped-due-to-errors>stopped due to errors</dfn> when the
  element's <code id=playing-the-media-resource:dom-media-readystate-4><a href=#dom-media-readystate>readyState</a></code> attribute is <code id=playing-the-media-resource:dom-media-have_metadata-3><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> or greater, and the user agent <a href=#non-fatal-media-error>encounters a non-fatal error</a> during the processing of the
  <a href=#media-data id=playing-the-media-resource:media-data>media data</a>, and due to that error, is not able to play the content at the
  <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-3>current playback position</a>.</p>

  <p>A <a href=#media-element id=playing-the-media-resource:media-element-11>media element</a> is said to have <dfn id=paused-for-user-interaction>paused for user interaction</dfn> when its
  <code id=playing-the-media-resource:dom-media-paused-5><a href=#dom-media-paused>paused</a></code> attribute is false, the <code id=playing-the-media-resource:dom-media-readystate-5><a href=#dom-media-readystate>readyState</a></code> attribute is either <code id=playing-the-media-resource:dom-media-have_future_data-2><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or <code id=playing-the-media-resource:dom-media-have_enough_data><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code>, and the user agent has reached a point
  in the <a href=#media-resource id=playing-the-media-resource:media-resource-8>media resource</a> where the user has to make a selection for the resource to
  continue.</p>

  <p>It is possible for a <a href=#media-element id=playing-the-media-resource:media-element-12>media element</a> to have both <a href=#ended-playback id=playing-the-media-resource:ended-playback-3>ended playback</a> and
  <a href=#paused-for-user-interaction id=playing-the-media-resource:paused-for-user-interaction-2>paused for user interaction</a> at the same time.</p>

  <p>When a <a href=#media-element id=playing-the-media-resource:media-element-13>media element</a> that is <a href=#potentially-playing id=playing-the-media-resource:potentially-playing-2>potentially playing</a> stops playing
  because it has <a href=#paused-for-user-interaction id=playing-the-media-resource:paused-for-user-interaction-3>paused for user interaction</a>, the user agent must <a href=#queue-a-media-element-task id=playing-the-media-resource:queue-a-media-element-task>queue a media
  element task</a> given the <a href=#media-element id=playing-the-media-resource:media-element-14>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=playing-the-media-resource:concept-event-fire data-x-internal=concept-event-fire>fire
  an event</a> named <code id=playing-the-media-resource:event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the element.</p>

  <p>A <a href=#media-element id=playing-the-media-resource:media-element-15>media element</a> is said to have <dfn id=paused-for-in-band-content>paused for in-band content</dfn> when its
  <code id=playing-the-media-resource:dom-media-paused-6><a href=#dom-media-paused>paused</a></code> attribute is false, the <code id=playing-the-media-resource:dom-media-readystate-6><a href=#dom-media-readystate>readyState</a></code> attribute is either <code id=playing-the-media-resource:dom-media-have_future_data-3><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or <code id=playing-the-media-resource:dom-media-have_enough_data-2><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code>, and the user agent has suspended
  playback of the <a href=#media-resource id=playing-the-media-resource:media-resource-9>media resource</a> in order to play content that is temporally anchored
  to the <a href=#media-resource id=playing-the-media-resource:media-resource-10>media resource</a> and has a nonzero length, or to play content that is
  temporally anchored to a segment of the <a href=#media-resource id=playing-the-media-resource:media-resource-11>media resource</a> but has a length longer than
  that segment.</p>

  <p class=example>One example of when a <a href=#media-element id=playing-the-media-resource:media-element-16>media element</a> would be <a href=#paused-for-in-band-content id=playing-the-media-resource:paused-for-in-band-content-2>paused for
  in-band content</a> is when the user agent is playing <a href=#attr-track-kind-descriptions id=playing-the-media-resource:attr-track-kind-descriptions>audio descriptions</a> from an external WebVTT file, and
  the synthesized speech generated for a cue is longer than the time between the <a href=#text-track-cue-start-time id=playing-the-media-resource:text-track-cue-start-time>text track
  cue start time</a> and the <a href=#text-track-cue-end-time id=playing-the-media-resource:text-track-cue-end-time>text track cue end time</a>.</p>

  <hr>

  <p id=reaches-the-end>When the <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-4>current playback position</a> reaches the end of the
  <a href=#media-resource id=playing-the-media-resource:media-resource-12>media resource</a> when the <a href=#direction-of-playback id=playing-the-media-resource:direction-of-playback-4>direction of playback</a> is forwards, then the user
  agent must follow these steps:</p>

  <ol><li><p>If the <a href=#media-element id=playing-the-media-resource:media-element-17>media element</a> has a <code id=playing-the-media-resource:attr-media-loop-2><a href=#attr-media-loop>loop</a></code>
   attribute specified, then <a href=#dom-media-seek id=playing-the-media-resource:dom-media-seek>seek</a> to the <a href=#earliest-possible-position id=playing-the-media-resource:earliest-possible-position-2>earliest
   possible position</a> of the <a href=#media-resource id=playing-the-media-resource:media-resource-13>media resource</a> and return.<li><p>As defined above, the <code id=playing-the-media-resource:dom-media-ended><a href=#dom-media-ended>ended</a></code> IDL attribute starts
   returning true once the <a id=playing-the-media-resource:event-loop-2 href=webappapis.html#event-loop>event loop</a> returns to <a href=webappapis.html#step1>step 1</a>.<li>
    <p><a href=#queue-a-media-element-task id=playing-the-media-resource:queue-a-media-element-task-2>Queue a media element task</a> given the <a href=#media-element id=playing-the-media-resource:media-element-18>media element</a> and the
    following steps:</p>

    <ol><li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=playing-the-media-resource:concept-event-fire-2 data-x-internal=concept-event-fire>Fire an event</a> named <code id=playing-the-media-resource:event-media-timeupdate-2><a href=#event-media-timeupdate>timeupdate</a></code> at the <a href=#media-element id=playing-the-media-resource:media-element-19>media element</a>.<li>
      <p>If the <a href=#media-element id=playing-the-media-resource:media-element-20>media element</a> has <a href=#ended-playback id=playing-the-media-resource:ended-playback-4>ended playback</a>, the <a href=#direction-of-playback id=playing-the-media-resource:direction-of-playback-5>direction of
      playback</a> is forwards, and <a href=#dom-media-paused id=playing-the-media-resource:dom-media-paused-7>paused</a> is false,
      then:</p>

      <ol><li><p>Set the <code id=playing-the-media-resource:dom-media-paused-8><a href=#dom-media-paused>paused</a></code> attribute to true.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=playing-the-media-resource:concept-event-fire-3 data-x-internal=concept-event-fire>Fire an event</a> named <code id=playing-the-media-resource:event-media-pause><a href=#event-media-pause>pause</a></code> at the <a href=#media-element id=playing-the-media-resource:media-element-21>media element</a>.<li><p><a href=#take-pending-play-promises id=playing-the-media-resource:take-pending-play-promises>Take pending play promises</a> and <a href=#reject-pending-play-promises id=playing-the-media-resource:reject-pending-play-promises>reject pending play promises</a>
       with the result and an <a id=playing-the-media-resource:aborterror href=https://webidl.spec.whatwg.org/#aborterror data-x-internal=aborterror>"<code>AbortError</code>"</a>
       <code id=playing-the-media-resource:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</ol>
     <li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=playing-the-media-resource:concept-event-fire-4 data-x-internal=concept-event-fire>Fire an event</a> named <code id=playing-the-media-resource:event-media-ended><a href=#event-media-ended>ended</a></code> at the <a href=#media-element id=playing-the-media-resource:media-element-22>media element</a>.</ol>
   </ol>

  <p>When the <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-5>current playback position</a> reaches the <a href=#earliest-possible-position id=playing-the-media-resource:earliest-possible-position-3>earliest possible
  position</a> of the <a href=#media-resource id=playing-the-media-resource:media-resource-14>media resource</a> when the <a href=#direction-of-playback id=playing-the-media-resource:direction-of-playback-6>direction of playback</a> is
  backwards, then the user agent must only <a href=#queue-a-media-element-task id=playing-the-media-resource:queue-a-media-element-task-3>queue a media element task</a> given the
  <a href=#media-element id=playing-the-media-resource:media-element-23>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=playing-the-media-resource:concept-event-fire-5 data-x-internal=concept-event-fire>fire an event</a> named <code id=playing-the-media-resource:event-media-timeupdate-3><a href=#event-media-timeupdate>timeupdate</a></code> at the element.</p>

  <p class=note>The word "reaches" here does not imply that the <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-6>current playback
  position</a> needs to have changed during normal playback; it could be via <a href=#dom-media-seek id=playing-the-media-resource:dom-media-seek-2>seeking</a>, for instance.</p>

  <hr>

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-defaultplaybackrate data-dfn-type=attribute><code>defaultPlaybackRate</code></dfn> attribute gives the
  desired speed at which the <a href=#media-resource id=playing-the-media-resource:media-resource-15>media resource</a> is to play, as a multiple of its intrinsic
  speed. The attribute is mutable: on getting it must return the last value it was set to, or 1.0 if
  it hasn't yet been set; on setting the attribute must be set to the new value.</p>

  <p class=note>The <code id=playing-the-media-resource:dom-media-defaultplaybackrate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code> is used
  by the user agent when it <a href=#expose-a-user-interface-to-the-user id=playing-the-media-resource:expose-a-user-interface-to-the-user>exposes a user
  interface to the user</a>.</p>

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-playbackrate data-dfn-type=attribute><code>playbackRate</code></dfn> attribute gives the effective playback
  rate, which is the speed at which the <a href=#media-resource id=playing-the-media-resource:media-resource-16>media resource</a> plays, as a multiple of its
  intrinsic speed. If it is not equal to the <code id=playing-the-media-resource:dom-media-defaultplaybackrate-2><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code>, then the implication is that
  the user is using a feature such as fast forward or slow motion playback. The attribute is
  mutable: on getting it must return the last value it was set to, or 1.0 if it hasn't yet been set;
  on setting, the user agent must follow these steps:</p>

  <ol><li><p>If the given value is not supported by the user agent, then throw a
   <a id=playing-the-media-resource:notsupportederror href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=playing-the-media-resource:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Set <code id=playing-the-media-resource:dom-media-playbackrate-3><a href=#dom-media-playbackrate>playbackRate</a></code> to the new value, and if the
   element is <a href=#potentially-playing id=playing-the-media-resource:potentially-playing-3>potentially playing</a>, change the playback speed.</ol>

  <p id=rateUpdate>When the <code id=playing-the-media-resource:dom-media-defaultplaybackrate-3><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code> or <code id=playing-the-media-resource:dom-media-playbackrate-4><a href=#dom-media-playbackrate>playbackRate</a></code> attributes change value (either by being set
  by script or by being changed directly by the user agent, e.g. in response to user control), the
  user agent must <a href=#queue-a-media-element-task id=playing-the-media-resource:queue-a-media-element-task-4>queue a media element task</a> given the <a href=#media-element id=playing-the-media-resource:media-element-24>media element</a> to
  <a href=https://dom.spec.whatwg.org/#concept-event-fire id=playing-the-media-resource:concept-event-fire-6 data-x-internal=concept-event-fire>fire an event</a> named <code id=playing-the-media-resource:event-media-ratechange><a href=#event-media-ratechange>ratechange</a></code> at the <a href=#media-element id=playing-the-media-resource:media-element-25>media element</a>. The user
  agent must process attribute changes smoothly and must not introduce any perceivable gaps or
  muting of playback in response.</p>

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-preservespitch data-dfn-type=attribute><code>preservesPitch</code></dfn> getter steps are to return true if a
  pitch-preserving algorithm is in effect during playback. The setter steps are to correspondingly
  switch the pitch-preserving algorithm on or off, without any perceivable gaps or muting of
  playback. By default, such a pitch-preserving algorithm must be in effect (i.e., the getter will
  initially return true).</p>

  <hr>

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-played data-dfn-type=attribute><code>played</code></dfn>
  attribute must return a new static <a href=#normalised-timeranges-object id=playing-the-media-resource:normalised-timeranges-object>normalized <code>TimeRanges</code> object</a> that
  represents the ranges of points on the <a href=#media-timeline id=playing-the-media-resource:media-timeline>media timeline</a> of the <a href=#media-resource id=playing-the-media-resource:media-resource-17>media
  resource</a> reached through the usual monotonic increase of the <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-7>current playback
  position</a> during normal playback, if any, at the time the attribute is evaluated.</p>

  <p class=warning>Returning a new object each time is a bad pattern for attribute getters and is
  only enshrined here as it would be costly to change it. It is not to be copied to new APIs.</p>

  <hr>

  <p>Each <a href=#media-element id=playing-the-media-resource:media-element-26>media element</a> has a <dfn id=list-of-pending-play-promises>list of pending play promises</dfn>, which must
  initially be empty.</p>

  <p>To <dfn id=take-pending-play-promises>take pending play promises</dfn> for a <a href=#media-element id=playing-the-media-resource:media-element-27>media element</a>, the user agent must
  run the following steps:</p>

  <ol><li><p>Let <var>promises</var> be an empty list of promises.<li><p>Copy the <a href=#media-element id=playing-the-media-resource:media-element-28>media element</a>'s <a href=#list-of-pending-play-promises id=playing-the-media-resource:list-of-pending-play-promises>list of pending play promises</a> to
   <var>promises</var>.<li><p>Clear the <a href=#media-element id=playing-the-media-resource:media-element-29>media element</a>'s <a href=#list-of-pending-play-promises id=playing-the-media-resource:list-of-pending-play-promises-2>list of pending play
   promises</a>.<li>Return <var>promises</var>.</ol>

  <p>To <dfn id=resolve-pending-play-promises>resolve pending play promises</dfn> for a <a href=#media-element id=playing-the-media-resource:media-element-30>media element</a> with a list of
  promises <var>promises</var>, the user agent must resolve each promise in <var>promises</var> with
  undefined.</p>

  <p>To <dfn id=reject-pending-play-promises>reject pending play promises</dfn> for a <a href=#media-element id=playing-the-media-resource:media-element-31>media element</a> with a list of
  promises <var>promises</var> and an exception name <var>error</var>, the user agent must reject
  each promise in <var>promises</var> with <var>error</var>.</p>

  <p>To <dfn id=notify-about-playing>notify about playing</dfn> for a <a href=#media-element id=playing-the-media-resource:media-element-32>media element</a>, the user agent must run
  the following steps:</p>

  <ol><li><p><a href=#take-pending-play-promises id=playing-the-media-resource:take-pending-play-promises-2>Take pending play promises</a> and let <var>promises</var> be the
   result.<li>
    <p><a href=#queue-a-media-element-task id=playing-the-media-resource:queue-a-media-element-task-5>Queue a media element task</a> given the element and the following steps:</p>

    <ol><li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=playing-the-media-resource:concept-event-fire-7 data-x-internal=concept-event-fire>Fire an event</a> named <code id=playing-the-media-resource:event-media-playing><a href=#event-media-playing>playing</a></code> at the element.<li><p><a href=#resolve-pending-play-promises id=playing-the-media-resource:resolve-pending-play-promises>Resolve pending play promises</a> with <var>promises</var>.</ol>
   </ol>

  <p>When the <dfn data-dfn-for=HTMLMediaElement id=dom-media-play data-dfn-type=method><code>play()</code></dfn>
  method on a <a href=#media-element id=playing-the-media-resource:media-element-33>media element</a> is invoked, the user agent must run the following
  steps.</p>

  <ol><li><p>If the <a href=#media-element id=playing-the-media-resource:media-element-34>media element</a> is not <a href=#allowed-to-play id=playing-the-media-resource:allowed-to-play>allowed to play</a>, then return
   <a id=playing-the-media-resource:a-promise-rejected-with href=https://webidl.spec.whatwg.org/#a-promise-rejected-with data-x-internal=a-promise-rejected-with>a promise rejected with</a> a <a id=playing-the-media-resource:notallowederror href=https://webidl.spec.whatwg.org/#notallowederror data-x-internal=notallowederror>"<code>NotAllowedError</code>"</a>
   <code id=playing-the-media-resource:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li>
    <p>If the <a href=#media-element id=playing-the-media-resource:media-element-35>media element</a>'s <code id=playing-the-media-resource:dom-media-error><a href=#dom-media-error>error</a></code> attribute is
    not null and its <a href=#concept-mediaerror-code id=playing-the-media-resource:concept-mediaerror-code>code</a> is <code id=playing-the-media-resource:dom-mediaerror-media_err_src_not_supported><a href=#dom-mediaerror-media_err_src_not_supported>MEDIA_ERR_SRC_NOT_SUPPORTED</a></code>, then
    return <a id=playing-the-media-resource:a-promise-rejected-with-2 href=https://webidl.spec.whatwg.org/#a-promise-rejected-with data-x-internal=a-promise-rejected-with>a promise rejected with</a> a <a id=playing-the-media-resource:notsupportederror-2 href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a>
    <code id=playing-the-media-resource:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>

    <p class=note>This means that the <a href=#dedicated-media-source-failure-steps id=playing-the-media-resource:dedicated-media-source-failure-steps>dedicated media source failure steps</a> have run.
    Playback is not possible until the <a href=#media-element-load-algorithm id=playing-the-media-resource:media-element-load-algorithm>media element load algorithm</a> clears the <code id=playing-the-media-resource:dom-media-error-2><a href=#dom-media-error>error</a></code> attribute.</p>
   <li><p>Let <var>promise</var> be a new promise and append <var>promise</var> to the <a href=#list-of-pending-play-promises id=playing-the-media-resource:list-of-pending-play-promises-3>list of
   pending play promises</a>.<li><p>Run the <a href=#internal-play-steps id=playing-the-media-resource:internal-play-steps>internal play steps</a> for the <a href=#media-element id=playing-the-media-resource:media-element-36>media element</a>.<li><p>Return <var>promise</var>.</ol>

  <p>The <dfn id=internal-play-steps>internal play steps</dfn> for a <a href=#media-element id=playing-the-media-resource:media-element-37>media element</a> are as follows:</p>

  <ol><li><p>If the <a href=#media-element id=playing-the-media-resource:media-element-38>media element</a>'s <code id=playing-the-media-resource:dom-media-networkstate><a href=#dom-media-networkstate>networkState</a></code> attribute has the value <code id=playing-the-media-resource:dom-media-network_empty><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>, invoke the <a href=#media-element id=playing-the-media-resource:media-element-39>media element</a>'s
   <a href=#concept-media-load-algorithm id=playing-the-media-resource:concept-media-load-algorithm>resource selection algorithm</a>.<li>
    <p>If the <a href=#ended-playback id=playing-the-media-resource:ended-playback-5>playback has ended</a> and the <a href=#direction-of-playback id=playing-the-media-resource:direction-of-playback-7>direction of
    playback</a> is forwards, <a href=#dom-media-seek id=playing-the-media-resource:dom-media-seek-3>seek</a> to the <a href=#earliest-possible-position id=playing-the-media-resource:earliest-possible-position-4>earliest
    possible position</a> of the <a href=#media-resource id=playing-the-media-resource:media-resource-18>media resource</a>.</p>

    <p class=note>This <a href=#seekUpdate>will cause</a> the user agent to <a href=#queue-a-media-element-task id=playing-the-media-resource:queue-a-media-element-task-6>queue a media
    element task</a> given the <a href=#media-element id=playing-the-media-resource:media-element-40>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=playing-the-media-resource:concept-event-fire-8 data-x-internal=concept-event-fire>fire an event</a> named <code id=playing-the-media-resource:event-media-timeupdate-4><a href=#event-media-timeupdate>timeupdate</a></code> at the <a href=#media-element id=playing-the-media-resource:media-element-41>media element</a>.</p>
    
   <li>
    <p>If the <a href=#media-element id=playing-the-media-resource:media-element-42>media element</a>'s <code id=playing-the-media-resource:dom-media-paused-9><a href=#dom-media-paused>paused</a></code> attribute
    is true, then:</p>

    <ol><li><p>Change the value of <code id=playing-the-media-resource:dom-media-paused-10><a href=#dom-media-paused>paused</a></code> to false.<li><p>If the <a href=#show-poster-flag id=playing-the-media-resource:show-poster-flag>show poster flag</a> is true, set the element's <a href=#show-poster-flag id=playing-the-media-resource:show-poster-flag-2>show poster
     flag</a> to false and run the <i id=playing-the-media-resource:time-marches-on><a href=#time-marches-on>time marches on</a></i> steps.<li><p><a href=#queue-a-media-element-task id=playing-the-media-resource:queue-a-media-element-task-7>Queue a media element task</a> given the <a href=#media-element id=playing-the-media-resource:media-element-43>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=playing-the-media-resource:concept-event-fire-9 data-x-internal=concept-event-fire>fire an event</a> named <code id=playing-the-media-resource:event-media-play><a href=#event-media-play>play</a></code> at the element.<li>
      <p>If the <a href=#media-element id=playing-the-media-resource:media-element-44>media element</a>'s <code id=playing-the-media-resource:dom-media-readystate-7><a href=#dom-media-readystate>readyState</a></code>
      attribute has the value <code id=playing-the-media-resource:dom-media-have_nothing-2><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, <code id=playing-the-media-resource:dom-media-have_metadata-4><a href=#dom-media-have_metadata>HAVE_METADATA</a></code>, or <code id=playing-the-media-resource:dom-media-have_current_data-2><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code>, <a href=#queue-a-media-element-task id=playing-the-media-resource:queue-a-media-element-task-8>queue a media element
      task</a> given the <a href=#media-element id=playing-the-media-resource:media-element-45>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=playing-the-media-resource:concept-event-fire-10 data-x-internal=concept-event-fire>fire an
      event</a> named <code id=playing-the-media-resource:event-media-waiting-2><a href=#event-media-waiting>waiting</a></code> at the element.</p>

      <p>Otherwise, the <a href=#media-element id=playing-the-media-resource:media-element-46>media element</a>'s <code id=playing-the-media-resource:dom-media-readystate-8><a href=#dom-media-readystate>readyState</a></code> attribute has the value <code id=playing-the-media-resource:dom-media-have_future_data-4><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or <code id=playing-the-media-resource:dom-media-have_enough_data-3><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code>: <a href=#notify-about-playing id=playing-the-media-resource:notify-about-playing>notify about playing</a>
      for the element.</p>
     </ol>
   <li>
    <p>Otherwise, if the <a href=#media-element id=playing-the-media-resource:media-element-47>media element</a>'s <code id=playing-the-media-resource:dom-media-readystate-9><a href=#dom-media-readystate>readyState</a></code> attribute has the value <code id=playing-the-media-resource:dom-media-have_future_data-5><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or <code id=playing-the-media-resource:dom-media-have_enough_data-4><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code>, <a href=#take-pending-play-promises id=playing-the-media-resource:take-pending-play-promises-3>take pending play
    promises</a> and <a href=#queue-a-media-element-task id=playing-the-media-resource:queue-a-media-element-task-9>queue a media element task</a> given the <a href=#media-element id=playing-the-media-resource:media-element-48>media element</a>
    to <a href=#resolve-pending-play-promises id=playing-the-media-resource:resolve-pending-play-promises-2>resolve pending play promises</a> with the result.</p>

    <p class=note>The media element is already playing. However, it's possible that
    <var>promise</var> will be <a href=#reject-pending-play-promises id=playing-the-media-resource:reject-pending-play-promises-2>rejected</a> before
    the queued task is run.</p>
   <li><p>Set the <a href=#media-element id=playing-the-media-resource:media-element-49>media element</a>'s <a href=#can-autoplay-flag id=playing-the-media-resource:can-autoplay-flag-2>can autoplay flag</a> to false.</ol>

  <hr>

  <p>When the <dfn data-dfn-for=HTMLMediaElement id=dom-media-pause data-dfn-type=method><code>pause()</code></dfn>
  method is invoked, and when the user agent is required to pause the <a href=#media-element id=playing-the-media-resource:media-element-50>media element</a>,
  the user agent must run the following steps:</p>

  <ol><li><p>If the <a href=#media-element id=playing-the-media-resource:media-element-51>media element</a>'s <code id=playing-the-media-resource:dom-media-networkstate-2><a href=#dom-media-networkstate>networkState</a></code> attribute has the value <code id=playing-the-media-resource:dom-media-network_empty-2><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>, invoke the <a href=#media-element id=playing-the-media-resource:media-element-52>media element</a>'s
   <a href=#concept-media-load-algorithm id=playing-the-media-resource:concept-media-load-algorithm-2>resource selection algorithm</a>.<li><p>Run the <a href=#internal-pause-steps id=playing-the-media-resource:internal-pause-steps>internal pause steps</a> for the <a href=#media-element id=playing-the-media-resource:media-element-53>media element</a>.</ol>

  <p>The <dfn id=internal-pause-steps>internal pause steps</dfn> for a <a href=#media-element id=playing-the-media-resource:media-element-54>media element</a> are as follows:</p>

  <ol><li><p>Set the <a href=#media-element id=playing-the-media-resource:media-element-55>media element</a>'s <a href=#can-autoplay-flag id=playing-the-media-resource:can-autoplay-flag-3>can autoplay flag</a> to false.<li><p>If the <a href=#media-element id=playing-the-media-resource:media-element-56>media element</a>'s <code id=playing-the-media-resource:dom-media-paused-11><a href=#dom-media-paused>paused</a></code> attribute
   is false, run the following steps:</p>

    <ol><li><p>Change the value of <code id=playing-the-media-resource:dom-media-paused-12><a href=#dom-media-paused>paused</a></code> to true.<li><p><a href=#take-pending-play-promises id=playing-the-media-resource:take-pending-play-promises-4>Take pending play promises</a> and let <var>promises</var> be the
     result.<li>
      <p><a href=#queue-a-media-element-task id=playing-the-media-resource:queue-a-media-element-task-10>Queue a media element task</a> given the <a href=#media-element id=playing-the-media-resource:media-element-57>media element</a> and the
      following steps:</p>

      <ol><li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=playing-the-media-resource:concept-event-fire-11 data-x-internal=concept-event-fire>Fire an event</a> named <code id=playing-the-media-resource:event-media-timeupdate-5><a href=#event-media-timeupdate>timeupdate</a></code> at the element.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=playing-the-media-resource:concept-event-fire-12 data-x-internal=concept-event-fire>Fire an event</a> named <code id=playing-the-media-resource:event-media-pause-2><a href=#event-media-pause>pause</a></code> at the element.<li><p><a href=#reject-pending-play-promises id=playing-the-media-resource:reject-pending-play-promises-3>Reject pending play promises</a> with <var>promises</var> and an
       <a id=playing-the-media-resource:aborterror-2 href=https://webidl.spec.whatwg.org/#aborterror data-x-internal=aborterror>"<code>AbortError</code>"</a> <code id=playing-the-media-resource:domexception-5><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</ol>
     <li><p>Set the <a href=#official-playback-position id=playing-the-media-resource:official-playback-position>official playback position</a> to the <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-8>current playback
     position</a>.</ol>
   </ol>

  <hr>

  <p>If the element's <code id=playing-the-media-resource:dom-media-playbackrate-5><a href=#dom-media-playbackrate>playbackRate</a></code> is positive or zero,
  then the <dfn id=direction-of-playback>direction of playback</dfn> is forwards. Otherwise, it is backwards.</p>

  <p id=media-playback>When a <a href=#media-element id=playing-the-media-resource:media-element-58>media element</a> is <a href=#potentially-playing id=playing-the-media-resource:potentially-playing-4>potentially playing</a> and
  its <code id=playing-the-media-resource:document><a href=dom.html#document>Document</a></code> is a <a id=playing-the-media-resource:fully-active href=document-sequences.html#fully-active>fully active</a> <code id=playing-the-media-resource:document-2><a href=dom.html#document>Document</a></code>, its <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-9>current
  playback position</a> must increase monotonically at the element's <code id=playing-the-media-resource:dom-media-playbackrate-6><a href=#dom-media-playbackrate>playbackRate</a></code> units of media time per unit time of the
  <a href=#media-timeline id=playing-the-media-resource:media-timeline-2>media timeline</a>'s clock. (This specification always refers to this as an
  <i>increase</i>, but that increase could actually be a <em>de</em>crease if the element's <code id=playing-the-media-resource:dom-media-playbackrate-7><a href=#dom-media-playbackrate>playbackRate</a></code> is negative.)</p>

  <p class=note>The element's <code id=playing-the-media-resource:dom-media-playbackrate-8><a href=#dom-media-playbackrate>playbackRate</a></code> can be
  0.0, in which case the <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-10>current playback position</a> doesn't move, despite playback not
  being paused (<code id=playing-the-media-resource:dom-media-paused-13><a href=#dom-media-paused>paused</a></code> doesn't become true, and the <code id=playing-the-media-resource:event-media-pause-3><a href=#event-media-pause>pause</a></code> event doesn't fire).</p>

  <p class=note>This specification doesn't define how the user agent achieves the appropriate
  playback rate — depending on the protocol and media available, it is plausible that the user
  agent could negotiate with the server to have the server provide the media data at the appropriate
  rate, so that (except for the period between when the rate is changed and when the server updates
  the stream's playback rate) the client doesn't actually have to drop or interpolate any
  frames.</p>

  <p>Any time the user agent <a href=webappapis.html#await-a-stable-state id=playing-the-media-resource:await-a-stable-state>provides a stable state</a>,
  the <a href=#official-playback-position id=playing-the-media-resource:official-playback-position-2>official playback position</a> must be set to the <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-11>current playback
  position</a>.</p> 

  <p>While the <a href=#direction-of-playback id=playing-the-media-resource:direction-of-playback-8>direction of playback</a> is backwards, any corresponding audio must be
  <a href=#concept-media-muted id=playing-the-media-resource:concept-media-muted-2>muted</a>. While the element's <code id=playing-the-media-resource:dom-media-playbackrate-9><a href=#dom-media-playbackrate>playbackRate</a></code> is so low or so high that the user agent
  cannot play audio usefully, the corresponding audio must also be <a href=#concept-media-muted id=playing-the-media-resource:concept-media-muted-3>muted</a>. If the element's <code id=playing-the-media-resource:dom-media-playbackrate-10><a href=#dom-media-playbackrate>playbackRate</a></code> is not 1.0 and <code id=playing-the-media-resource:dom-media-preservespitch><a href=#dom-media-preservespitch>preservesPitch</a></code> is true, the user agent must apply pitch
  adjustment to preserve the original pitch of the audio. Otherwise, the user agent must speed up
  or slow down the audio without any pitch adjustment.</p>

  <p>When a <a href=#media-element id=playing-the-media-resource:media-element-59>media element</a> is <a href=#potentially-playing id=playing-the-media-resource:potentially-playing-5>potentially playing</a>, its audio data played
  must be synchronized with the <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-12>current playback position</a>, at the element's
  <a href=#effective-media-volume id=playing-the-media-resource:effective-media-volume>effective media volume</a>. The user agent must play the audio from audio tracks that
  were enabled when the <a id=playing-the-media-resource:event-loop-3 href=webappapis.html#event-loop>event loop</a> last reached <a href=webappapis.html#step1>step 1</a>.</p>

  <p>When a <a href=#media-element id=playing-the-media-resource:media-element-60>media element</a> is not <a href=#potentially-playing id=playing-the-media-resource:potentially-playing-6>potentially playing</a>, audio must not play
  for the element.</p>

  <p><a href=#media-element id=playing-the-media-resource:media-element-61>Media elements</a> that are <a href=#potentially-playing id=playing-the-media-resource:potentially-playing-7>potentially playing</a>
  while not <a id=playing-the-media-resource:in-a-document href=https://dom.spec.whatwg.org/#in-a-document data-x-internal=in-a-document>in a document</a> must not play any video, but should play any audio component.
  Media elements must not stop playing just because all references to them have been removed; only
  once a media element is in a state where no further audio could ever be played by that element may
  the element be garbage collected.</p>

  <p class=note>It is possible for an element to which no explicit references exist to play audio,
  even if such an element is not still actively playing: for instance, it could be unpaused but
  stalled waiting for content to buffer, or it could be still buffering, but with a
  <code id=playing-the-media-resource:event-media-suspend><a href=#event-media-suspend>suspend</a></code> event listener that begins playback. Even a
  media element whose <a href=#media-resource id=playing-the-media-resource:media-resource-19>media resource</a> has no audio tracks could eventually play audio
  again if it had an event listener that changes the <a href=#media-resource id=playing-the-media-resource:media-resource-20>media resource</a>.</p>

  <hr>

  <p>Each <a href=#media-element id=playing-the-media-resource:media-element-62>media element</a> has a <dfn id=list-of-newly-introduced-cues>list of newly introduced cues</dfn>, which must be
  initially empty. Whenever a <a href=#text-track-cue id=playing-the-media-resource:text-track-cue>text track cue</a> is added to the <a href=#text-track-list-of-cues id=playing-the-media-resource:text-track-list-of-cues>list of cues</a> of a <a href=#text-track id=playing-the-media-resource:text-track>text track</a> that is in the <a href=#list-of-text-tracks id=playing-the-media-resource:list-of-text-tracks>list of text
  tracks</a> for a <a href=#media-element id=playing-the-media-resource:media-element-63>media element</a>, that <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-2>cue</a> must
  be added to the <a href=#media-element id=playing-the-media-resource:media-element-64>media element</a>'s <a href=#list-of-newly-introduced-cues id=playing-the-media-resource:list-of-newly-introduced-cues>list of newly introduced cues</a>. Whenever
  a <a href=#text-track id=playing-the-media-resource:text-track-2>text track</a> is added to the <a href=#list-of-text-tracks id=playing-the-media-resource:list-of-text-tracks-2>list of text tracks</a> for a <a href=#media-element id=playing-the-media-resource:media-element-65>media
  element</a>, all of the <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-3>cues</a> in that <a href=#text-track id=playing-the-media-resource:text-track-3>text
  track</a>'s <a href=#text-track-list-of-cues id=playing-the-media-resource:text-track-list-of-cues-2>list of cues</a> must be added to the
  <a href=#media-element id=playing-the-media-resource:media-element-66>media element</a>'s <a href=#list-of-newly-introduced-cues id=playing-the-media-resource:list-of-newly-introduced-cues-2>list of newly introduced cues</a>. When a <a href=#media-element id=playing-the-media-resource:media-element-67>media
  element</a>'s <a href=#list-of-newly-introduced-cues id=playing-the-media-resource:list-of-newly-introduced-cues-3>list of newly introduced cues</a> has new cues added while the
  <a href=#media-element id=playing-the-media-resource:media-element-68>media element</a>'s <a href=#show-poster-flag id=playing-the-media-resource:show-poster-flag-3>show poster flag</a> is not set, then the user agent must
  run the <i id=playing-the-media-resource:time-marches-on-2><a href=#time-marches-on>time marches on</a></i> steps.</p>

  <p>When a <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-4>text track cue</a> is removed from the <a href=#text-track-list-of-cues id=playing-the-media-resource:text-track-list-of-cues-3>list of cues</a> of a <a href=#text-track id=playing-the-media-resource:text-track-4>text track</a> that is in the <a href=#list-of-text-tracks id=playing-the-media-resource:list-of-text-tracks-3>list of text
  tracks</a> for a <a href=#media-element id=playing-the-media-resource:media-element-69>media element</a>, and whenever a <a href=#text-track id=playing-the-media-resource:text-track-5>text track</a> is removed
  from the <a href=#list-of-text-tracks id=playing-the-media-resource:list-of-text-tracks-4>list of text tracks</a> of a <a href=#media-element id=playing-the-media-resource:media-element-70>media element</a>, if the <a href=#media-element id=playing-the-media-resource:media-element-71>media
  element</a>'s <a href=#show-poster-flag id=playing-the-media-resource:show-poster-flag-4>show poster flag</a> is not set, then the user agent must run the
  <i id=playing-the-media-resource:time-marches-on-3><a href=#time-marches-on>time marches on</a></i> steps.</p>

  <p>When the <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-13>current playback position</a> of a <a href=#media-element id=playing-the-media-resource:media-element-72>media element</a> changes (e.g.
  due to playback or seeking), the user agent must run the <i id=playing-the-media-resource:time-marches-on-4><a href=#time-marches-on>time marches
  on</a></i> steps. To support use cases that depend on the timing accuracy of cue event firing, such as
  synchronizing captions with shot changes in a video, user agents should fire cue events as close
  as possible to their position on the media timeline, and ideally within 20 milliseconds. If the
  <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-14>current playback position</a> changes while the steps are running, then the user agent
  must wait for the steps to complete, and then must immediately rerun the steps. These steps are
  thus run as often as possible or needed.</p>

  <p class=note>If one iteration takes a long time, this can cause short duration
  <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-5>cues</a> to be skipped over as the user agent rushes ahead to
  "catch up", so these cues will not appear in the <code id=playing-the-media-resource:dom-texttrack-activecues><a href=#dom-texttrack-activecues>activeCues</a></code> list.</p>

  <p>The <dfn id=time-marches-on><i>time marches on</i></dfn> steps are as follows:</p>

  <ol><li><p>Let <var>current cues</var> be a list of <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-6>cues</a>, initialized to contain all the <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-7>cues</a> of all
   the <a href=#text-track-hidden id=playing-the-media-resource:text-track-hidden>hidden</a> or <a href=#text-track-showing id=playing-the-media-resource:text-track-showing>showing</a> <a href=#text-track id=playing-the-media-resource:text-track-6>text tracks</a> of the <a href=#media-element id=playing-the-media-resource:media-element-73>media
   element</a> (not the <a href=#text-track-disabled id=playing-the-media-resource:text-track-disabled>disabled</a> ones) whose <a href=#text-track-cue-start-time id=playing-the-media-resource:text-track-cue-start-time-2>start times</a> are less than or equal to the <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-15>current
   playback position</a> and whose <a href=#text-track-cue-end-time id=playing-the-media-resource:text-track-cue-end-time-2>end times</a> are
   greater than the <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-16>current playback position</a>.<li><p>Let <var>other cues</var> be a list of <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-8>cues</a>,
   initialized to contain all the <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-9>cues</a> of <a href=#text-track-hidden id=playing-the-media-resource:text-track-hidden-2>hidden</a> and <a href=#text-track-showing id=playing-the-media-resource:text-track-showing-2>showing</a> <a href=#text-track id=playing-the-media-resource:text-track-7>text tracks</a> of the <a href=#media-element id=playing-the-media-resource:media-element-74>media element</a> that are not present in <var>current cues</var>.<li><p>Let <var>last time</var> be the <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-17>current playback position</a> at the
   time this algorithm was last run for this <a href=#media-element id=playing-the-media-resource:media-element-75>media element</a>, if this is not the first
   time it has run.<li><p>If the <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-18>current playback position</a> has, since the last time this algorithm was
   run, only changed through its usual monotonic increase during normal playback, then let
   <var>missed cues</var> be the list of <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-10>cues</a> in <var>other
   cues</var> whose <a href=#text-track-cue-start-time id=playing-the-media-resource:text-track-cue-start-time-3>start times</a> are greater than or
   equal to <var>last time</var> and whose <a href=#text-track-cue-end-time id=playing-the-media-resource:text-track-cue-end-time-3>end times</a>
   are less than or equal to the <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-19>current playback position</a>. Otherwise, let <var>missed
   cues</var> be an empty list.<li><p>Remove all the <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-11>cues</a> in <var>missed cues</var>
   that are also in the <a href=#media-element id=playing-the-media-resource:media-element-76>media element</a>'s <a href=#list-of-newly-introduced-cues id=playing-the-media-resource:list-of-newly-introduced-cues-4>list of newly introduced cues</a>, and
   then empty the element's <a href=#list-of-newly-introduced-cues id=playing-the-media-resource:list-of-newly-introduced-cues-5>list of newly introduced cues</a>.<li><p>If the time was reached through the usual monotonic increase of the <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-20>current playback
   position</a> during normal playback, and if the user agent has not fired a <code id=playing-the-media-resource:event-media-timeupdate-6><a href=#event-media-timeupdate>timeupdate</a></code> event at the element in the past 15 to 250ms
   and is not still running event handlers for such an event, then the user agent must <a href=#queue-a-media-element-task id=playing-the-media-resource:queue-a-media-element-task-11>queue a
   media element task</a> given the <a href=#media-element id=playing-the-media-resource:media-element-77>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=playing-the-media-resource:concept-event-fire-13 data-x-internal=concept-event-fire>fire an event</a> named <code id=playing-the-media-resource:event-media-timeupdate-7><a href=#event-media-timeupdate>timeupdate</a></code> at the element. (In the other cases, such as
   explicit seeks, relevant events get fired as part of the overall process of changing the
   <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-21>current playback position</a>.)</p>

   <p class=note>The event thus is not to be fired faster than about 66Hz or slower than 4Hz
   (assuming the event handlers don't take longer than 250ms to run). User agents are encouraged to
   vary the frequency of the event based on the system load and the average cost of processing the
   event each time, so that the UI updates are not any more frequent than the user agent can
   comfortably handle while decoding the video.<li><p>If all of the <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-12>cues</a> in <var>current cues</var>
   have their <a href=#text-track-cue-active-flag id=playing-the-media-resource:text-track-cue-active-flag>text track cue active flag</a> set, none of the <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-13>cues</a> in <var>other cues</var> have their <a href=#text-track-cue-active-flag id=playing-the-media-resource:text-track-cue-active-flag-2>text track cue active
   flag</a> set, and <var>missed cues</var> is empty, then return.<li>
    <p>If the time was reached through the usual monotonic increase of the <a href=#current-playback-position id=playing-the-media-resource:current-playback-position-22>current playback
    position</a> during normal playback, and there are <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-14>cues</a>
    in <var>other cues</var> that have their <a href=#text-track-cue-pause-on-exit-flag id=playing-the-media-resource:text-track-cue-pause-on-exit-flag>text track cue pause-on-exit flag</a>
    set and that either have their <a href=#text-track-cue-active-flag id=playing-the-media-resource:text-track-cue-active-flag-3>text track cue active flag</a> set or are also in <var>missed cues</var>, then <a id=playing-the-media-resource:immediately href=infrastructure.html#immediately>immediately</a> <a href=#dom-media-pause id=playing-the-media-resource:dom-media-pause>pause</a> the
    <a href=#media-element id=playing-the-media-resource:media-element-78>media element</a>. </p>

    <p class=note>In the other cases, such as explicit seeks, playback is not paused by going past
    the end time of a <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-15>cue</a>, even if that <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-16>cue</a> has its <a href=#text-track-cue-pause-on-exit-flag id=playing-the-media-resource:text-track-cue-pause-on-exit-flag-2>text track cue pause-on-exit flag</a> set.</p>
   <li>
    <p>Let <var>events</var> be a list of <a href=webappapis.html#concept-task id=playing-the-media-resource:concept-task>tasks</a>,
    initially empty. Each <a href=webappapis.html#concept-task id=playing-the-media-resource:concept-task-2>task</a> in this list will be associated
    with a <a href=#text-track id=playing-the-media-resource:text-track-8>text track</a>, a <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-17>text track cue</a>, and a time, which are used to
    sort the list before the <a href=webappapis.html#concept-task id=playing-the-media-resource:concept-task-3>tasks</a> are queued.</p>

    <p>Let <var>affected tracks</var> be a list of <a href=#text-track id=playing-the-media-resource:text-track-9>text
    tracks</a>, initially empty.</p>

    <p>When the steps below say to <dfn id=prepare-an-event>prepare an event</dfn> named <var>event</var> for a
    <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-18>text track cue</a> <var>target</var> with a time <var>time</var>, the
    user agent must run these steps:</p>

    <ol><li><p>Let <var>track</var> be the <a href=#text-track id=playing-the-media-resource:text-track-10>text track</a> with which the <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-19>text
     track cue</a> <var>target</var> is associated.<li><p>Create a <a href=webappapis.html#concept-task id=playing-the-media-resource:concept-task-4>task</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=playing-the-media-resource:concept-event-fire-14 data-x-internal=concept-event-fire>fire an event</a> named <var>event</var> at
     <var>target</var>.<li><p>Add the newly created <a href=webappapis.html#concept-task id=playing-the-media-resource:concept-task-5>task</a> to <var>events</var>, associated with the time <var>time</var>, the <a href=#text-track id=playing-the-media-resource:text-track-11>text
     track</a> <var>track</var>, and the <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-20>text track cue</a> <var>target</var>.<li><p>Add <var>track</var> to <var>affected tracks</var>.</ol>
   <li><p>For each <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-21>text track cue</a> in <var>missed
   cues</var>, <a href=#prepare-an-event id=playing-the-media-resource:prepare-an-event>prepare an event</a> named <code id=playing-the-media-resource:event-media-enter><a href=#event-media-enter>enter</a></code> for the
   <code id=playing-the-media-resource:texttrackcue><a href=#texttrackcue>TextTrackCue</a></code> object with the <a href=#text-track-cue-start-time id=playing-the-media-resource:text-track-cue-start-time-4>text track cue start time</a>.<li><p>For each <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-22>text track cue</a> in <var>other
   cues</var> that either has its <a href=#text-track-cue-active-flag id=playing-the-media-resource:text-track-cue-active-flag-4>text track cue active flag</a> set or is in <var>missed cues</var>, <a href=#prepare-an-event id=playing-the-media-resource:prepare-an-event-2>prepare an event</a> named <code id=playing-the-media-resource:event-media-exit><a href=#event-media-exit>exit</a></code> for the <code id=playing-the-media-resource:texttrackcue-2><a href=#texttrackcue>TextTrackCue</a></code> object with the later of the
   <a href=#text-track-cue-end-time id=playing-the-media-resource:text-track-cue-end-time-4>text track cue end time</a> and the <a href=#text-track-cue-start-time id=playing-the-media-resource:text-track-cue-start-time-5>text track cue start time</a>.<li><p>For each <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-23>text track cue</a> in <var>current
   cues</var> that does not have its <a href=#text-track-cue-active-flag id=playing-the-media-resource:text-track-cue-active-flag-5>text track cue active flag</a> set, <a href=#prepare-an-event id=playing-the-media-resource:prepare-an-event-3>prepare an
   event</a> named <code id=playing-the-media-resource:event-media-enter-2><a href=#event-media-enter>enter</a></code> for the <code id=playing-the-media-resource:texttrackcue-3><a href=#texttrackcue>TextTrackCue</a></code>
   object with the <a href=#text-track-cue-start-time id=playing-the-media-resource:text-track-cue-start-time-6>text track cue start time</a>.<li>
    <p>Sort the <a href=webappapis.html#concept-task id=playing-the-media-resource:concept-task-6>tasks</a> in <var>events</var> in ascending
    time order (<a href=webappapis.html#concept-task id=playing-the-media-resource:concept-task-7>tasks</a> with earlier times first).</p>

    <p>Further sort <a href=webappapis.html#concept-task id=playing-the-media-resource:concept-task-8>tasks</a> in <var>events</var> that have
    the same time by the relative <a href=#text-track-cue-order id=playing-the-media-resource:text-track-cue-order>text track cue order</a> of the <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-24>text track cues</a> associated with these <a href=webappapis.html#concept-task id=playing-the-media-resource:concept-task-9>tasks</a>.</p>

    <p>Finally, sort <a href=webappapis.html#concept-task id=playing-the-media-resource:concept-task-10>tasks</a> in <var>events</var> that have the
    same time and same <a href=#text-track-cue-order id=playing-the-media-resource:text-track-cue-order-2>text track cue order</a> by placing <a href=webappapis.html#concept-task id=playing-the-media-resource:concept-task-11>tasks</a> that fire <code id=playing-the-media-resource:event-media-enter-3><a href=#event-media-enter>enter</a></code>
    events before those that fire <code id=playing-the-media-resource:event-media-exit-2><a href=#event-media-exit>exit</a></code> events.</p>
   <li><p><a href=#queue-a-media-element-task id=playing-the-media-resource:queue-a-media-element-task-12>Queue a media element task</a> given the <a href=#media-element id=playing-the-media-resource:media-element-79>media element</a> for each
   <a href=webappapis.html#concept-task id=playing-the-media-resource:concept-task-12>task</a> in <var>events</var>, in list order.<li><p>Sort <var>affected tracks</var> in the same order as the <a href=#text-track id=playing-the-media-resource:text-track-12>text tracks</a> appear in the <a href=#media-element id=playing-the-media-resource:media-element-80>media element</a>'s <a href=#list-of-text-tracks id=playing-the-media-resource:list-of-text-tracks-5>list of text
   tracks</a>, and remove duplicates.</p>

   <li><p>For each <a href=#text-track id=playing-the-media-resource:text-track-13>text track</a> in <var>affected tracks</var>, in the list order,
   <a href=#queue-a-media-element-task id=playing-the-media-resource:queue-a-media-element-task-13>queue a media element task</a> given the <a href=#media-element id=playing-the-media-resource:media-element-81>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=playing-the-media-resource:concept-event-fire-15 data-x-internal=concept-event-fire>fire an event</a> named <code id=playing-the-media-resource:event-media-cuechange><a href=#event-media-cuechange>cuechange</a></code> at the <code id=playing-the-media-resource:texttrack><a href=#texttrack>TextTrack</a></code> object, and, if the
   <a href=#text-track id=playing-the-media-resource:text-track-14>text track</a> has a corresponding <code id=playing-the-media-resource:the-track-element><a href=#the-track-element>track</a></code> element, to then <a href=https://dom.spec.whatwg.org/#concept-event-fire id=playing-the-media-resource:concept-event-fire-16 data-x-internal=concept-event-fire>fire an event</a> named <code id=playing-the-media-resource:event-media-cuechange-2><a href=#event-media-cuechange>cuechange</a></code> at the <code id=playing-the-media-resource:the-track-element-2><a href=#the-track-element>track</a></code> element as well.<li><p>Set the <a href=#text-track-cue-active-flag id=playing-the-media-resource:text-track-cue-active-flag-6>text track cue active flag</a> of all the <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-25>cues</a> in the <var>current cues</var>, and unset the <a href=#text-track-cue-active-flag id=playing-the-media-resource:text-track-cue-active-flag-7>text track cue
   active flag</a> of all the <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-26>cues</a> in the <var>other
   cues</var>.<li><p>Run the <a href=#rules-for-updating-the-text-track-rendering id=playing-the-media-resource:rules-for-updating-the-text-track-rendering>rules for updating the text track rendering</a> of each of the <a href=#text-track id=playing-the-media-resource:text-track-15>text tracks</a> in <var>affected tracks</var> that are <a href=#text-track-showing id=playing-the-media-resource:text-track-showing-3>showing</a>, providing the <a href=#text-track id=playing-the-media-resource:text-track-16>text track</a>'s <a href=#text-track-language id=playing-the-media-resource:text-track-language>text track
   language</a> as the fallback language if it is not the empty string. For example, for <a href=#text-track id=playing-the-media-resource:text-track-17>text tracks</a> based on WebVTT, the <a id=playing-the-media-resource:rules-for-updating-the-display-of-webvtt-text-tracks href=https://w3c.github.io/webvtt/#rules-for-updating-the-display-of-webvtt-text-tracks data-x-internal=rules-for-updating-the-display-of-webvtt-text-tracks>rules for updating the display
   of WebVTT text tracks</a>. <a href=references.html#refsWEBVTT>[WEBVTT]</a></ol>

  <p>For the purposes of the algorithm above, a <a href=#text-track-cue id=playing-the-media-resource:text-track-cue-27>text track cue</a> is considered to be part
  of a <a href=#text-track id=playing-the-media-resource:text-track-18>text track</a> only if it is listed in the <a href=#text-track-list-of-cues id=playing-the-media-resource:text-track-list-of-cues-4>text track list of cues</a>, not
  merely if it is associated with the <a href=#text-track id=playing-the-media-resource:text-track-19>text track</a>.</p>

  <p class=note>If the <a href=#media-element id=playing-the-media-resource:media-element-82>media element</a>'s <a id=playing-the-media-resource:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> stops being a
  <a id=playing-the-media-resource:fully-active-2 href=document-sequences.html#fully-active>fully active</a> document, then the playback will <a href=#media-playback>stop</a>
  until the document is active again.</p>

  <p>When a <a href=#media-element id=playing-the-media-resource:media-element-83>media element</a> is <a href=infrastructure.html#remove-an-element-from-a-document id=playing-the-media-resource:remove-an-element-from-a-document>removed
  from a <code>Document</code></a>, the user agent must run the following steps:</p>

  <ol><li><p><a id=playing-the-media-resource:await-a-stable-state-2 href=webappapis.html#await-a-stable-state>Await a stable state</a>, allowing the <a href=webappapis.html#concept-task id=playing-the-media-resource:concept-task-13>task</a> that removed the <a href=#media-element id=playing-the-media-resource:media-element-84>media element</a> from the
   <code id=playing-the-media-resource:document-3><a href=dom.html#document>Document</a></code> to continue. The <a id=playing-the-media-resource:synchronous-section href=webappapis.html#synchronous-section>synchronous section</a> consists of all the
   remaining steps of this algorithm. (Steps in the <a id=playing-the-media-resource:synchronous-section-2 href=webappapis.html#synchronous-section>synchronous section</a> are marked with
   ⌛.)<li><p>⌛ If the <a href=#media-element id=playing-the-media-resource:media-element-85>media element</a> is <a id=playing-the-media-resource:in-a-document-2 href=https://dom.spec.whatwg.org/#in-a-document data-x-internal=in-a-document>in a document</a>, return.<li><p>⌛ Run the <a href=#internal-pause-steps id=playing-the-media-resource:internal-pause-steps-2>internal pause steps</a> for the <a href=#media-element id=playing-the-media-resource:media-element-86>media element</a>.</p>
  </ol>

  



  <h5 id=seeking><span class=secno>4.8.11.9</span> Seeking<a href=#seeking class=self-link></a></h5>

  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-media-seeking id=dom-media-seeking-dev>seeking</a></code><dd><p>Returns true if the user agent is currently seeking.<dt><code><var>media</var>.<a href=#dom-media-seekable id=dom-media-seekable-dev>seekable</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable title="The seekable read-only property of HTMLMediaElement objects returns a new static normalized TimeRanges object that represents the ranges of the media resource, if any, that the user agent is able to seek to at the time seekable property is accessed.">HTMLMediaElement/seekable</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>8+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns a <code id=seeking:timeranges><a href=#timeranges>TimeRanges</a></code> object that represents the ranges of the <a href=#media-resource id=seeking:media-resource>media
    resource</a> to which it is possible for the user agent to seek.</p>
   <dt><code><var>media</var>.<a href=#dom-media-fastseek id=dom-media-fastseek-dev>fastSeek</a>(<var>time</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/fastSeek title="The HTMLMediaElement.fastSeek() method quickly seeks the media to the new time with precision tradeoff.">HTMLMediaElement/fastSeek</a><div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome no"><span>Chrome</span><span>No</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink no"><span>Edge</span><span>No</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Seeks to near the given <var>time</var> as fast as possible, trading precision for speed. (To
    seek to a precise time, use the <code id=seeking:dom-media-currenttime><a href=#dom-media-currenttime>currentTime</a></code>
    attribute.)</p>

    <p>This does nothing if the media resource has not been loaded.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-seeking data-dfn-type=attribute><code>seeking</code></dfn>
  attribute must initially have the value false.</p>

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-fastseek data-dfn-type=method><code>fastSeek(<var>time</var>)</code></dfn> method must <a href=#dom-media-seek id=seeking:dom-media-seek>seek</a> to the time given by <var>time</var>, with the
  <i>approximate-for-speed</i> flag set.</p>

  <p>When the user agent is required to <dfn id=dom-media-seek>seek</dfn> to a particular <var>new playback position</var> in the <a href=#media-resource id=seeking:media-resource-2>media resource</a>, optionally with the
  <i>approximate-for-speed</i> flag set, it means that the user agent must run the following steps.
  This algorithm interacts closely with the <a id=seeking:event-loop href=webappapis.html#event-loop>event loop</a> mechanism; in particular, it has
  a <a id=seeking:synchronous-section href=webappapis.html#synchronous-section>synchronous section</a> (which is triggered as part of the <a id=seeking:event-loop-2 href=webappapis.html#event-loop>event loop</a>
  algorithm). Steps in that section are marked with ⌛.</p>

  <ol><li><p>Set the <a href=#media-element id=seeking:media-element>media element</a>'s <a href=#show-poster-flag id=seeking:show-poster-flag>show poster flag</a> to false.<li><p>If the <a href=#media-element id=seeking:media-element-2>media element</a>'s <code id=seeking:dom-media-readystate><a href=#dom-media-readystate>readyState</a></code>
   is <code id=seeking:dom-media-have_nothing><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>, return.<li><p>If the element's <code id=seeking:dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> IDL attribute is true,
   then another instance of this algorithm is already running. Abort that other instance of the
   algorithm without waiting for the step that it is running to complete.<li><p>Set the <code id=seeking:dom-media-seeking-2><a href=#dom-media-seeking>seeking</a></code> IDL attribute to true.<li><p>If the seek was in response to a DOM method call or setting of an IDL attribute, then
   continue the script. The remainder of these steps must be run <a id=seeking:in-parallel href=infrastructure.html#in-parallel>in parallel</a>. With the exception
   of the steps marked with ⌛, they could be aborted at any time by another instance of this
   algorithm being invoked.<li><p>If the <var>new playback position</var> is later than the end of the <a href=#media-resource id=seeking:media-resource-3>media
   resource</a>, then let it be the end of the <a href=#media-resource id=seeking:media-resource-4>media resource</a> instead.<li><p>If the <var>new playback position</var> is less than the <a href=#earliest-possible-position id=seeking:earliest-possible-position>earliest possible
   position</a>, let it be that position instead.<li><p>If the (possibly now changed) <var>new playback position</var> is not in one of
   the ranges given in the <code id=seeking:dom-media-seekable><a href=#dom-media-seekable>seekable</a></code> attribute, then let it
   be the position in one of the ranges given in the <code id=seeking:dom-media-seekable-2><a href=#dom-media-seekable>seekable</a></code> attribute that is the nearest to the <var>new
   playback position</var>. If two positions both satisfy that constraint (i.e. the <var>new playback position</var> is exactly in the middle between two ranges in the <code id=seeking:dom-media-seekable-3><a href=#dom-media-seekable>seekable</a></code> attribute), then use the position that is closest to
   the <a href=#current-playback-position id=seeking:current-playback-position>current playback position</a>. If there are no ranges given in the <code id=seeking:dom-media-seekable-4><a href=#dom-media-seekable>seekable</a></code> attribute, then set the <code id=seeking:dom-media-seeking-3><a href=#dom-media-seeking>seeking</a></code> IDL attribute to false and return.<li>
    <p>If the <i>approximate-for-speed</i> flag is set, adjust the <var>new playback
    position</var> to a value that will allow for playback to resume promptly. If <var>new
    playback position</var> before this step is before <a href=#current-playback-position id=seeking:current-playback-position-2>current playback position</a>, then
    the adjusted <var>new playback position</var> must also be before the <a href=#current-playback-position id=seeking:current-playback-position-3>current
    playback position</a>. Similarly, if the <var>new playback position</var> before
    this step is after <a href=#current-playback-position id=seeking:current-playback-position-4>current playback position</a>, then the adjusted <var>new
    playback position</var> must also be after the <a href=#current-playback-position id=seeking:current-playback-position-5>current playback position</a>.</p>

    <p class=example>For example, the user agent could snap to a nearby key frame, so that it
    doesn't have to spend time decoding then discarding intermediate frames before resuming
    playback.</p>
   <li><p><a href=#queue-a-media-element-task id=seeking:queue-a-media-element-task>Queue a media element task</a> given the <a href=#media-element id=seeking:media-element-3>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=seeking:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=seeking:event-media-seeking><a href=#event-media-seeking>seeking</a></code> at the element.<li>
    <p>Set the <a href=#current-playback-position id=seeking:current-playback-position-6>current playback position</a> to the <var>new playback
    position</var>.</p>

    <p class=note>If the <a href=#media-element id=seeking:media-element-4>media element</a> was <a href=#potentially-playing id=seeking:potentially-playing>potentially playing</a>
    immediately before it started seeking, but seeking caused its <code id=seeking:dom-media-readystate-2><a href=#dom-media-readystate>readyState</a></code> attribute to change to a value lower than <code id=seeking:dom-media-have_future_data><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code>, then a <code id=seeking:event-media-waiting><a href=#event-media-waiting>waiting</a></code> event <a href=#fire-waiting-when-waiting>will be
    fired</a> at the element.</p> 

    <p class=note>This step sets the <a href=#current-playback-position id=seeking:current-playback-position-7>current playback position</a>, and thus can
    immediately trigger other conditions, such as the rules regarding when playback "<a href=#reaches-the-end>reaches the end of the media resource</a>" (part of the logic that
    handles looping), even before the user agent is actually able to render the media data for that
    position (as determined in the next step).</p>

    <p class=note>The <code id=seeking:dom-media-currenttime-2><a href=#dom-media-currenttime>currentTime</a></code> attribute returns
    the <a href=#official-playback-position id=seeking:official-playback-position>official playback position</a>, not the <a href=#current-playback-position id=seeking:current-playback-position-8>current playback position</a>, and
    therefore gets updated before script execution, separate from this algorithm.</p>
   <li><p>Wait until the user agent has established whether or not the <a href=#media-data id=seeking:media-data>media data</a> for
   the <var>new playback position</var> is available, and, if it is, until it has decoded
   enough data to play back that position.<li><p><a id=seeking:await-a-stable-state href=webappapis.html#await-a-stable-state>Await a stable state</a>. The <a id=seeking:synchronous-section-2 href=webappapis.html#synchronous-section>synchronous section</a> consists of all
   the remaining steps of this algorithm. (Steps in the <a id=seeking:synchronous-section-3 href=webappapis.html#synchronous-section>synchronous section</a> are marked
   with ⌛.)<li><p>⌛ Set the <code id=seeking:dom-media-seeking-4><a href=#dom-media-seeking>seeking</a></code> IDL attribute to
   false.<li><p>⌛ Run the <a href=#time-marches-on id=seeking:time-marches-on>time marches on</a> steps.<li id=seekUpdate><p>⌛ <a href=#queue-a-media-element-task id=seeking:queue-a-media-element-task-2>Queue a media element task</a> given the <a href=#media-element id=seeking:media-element-5>media
   element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=seeking:concept-event-fire-2 data-x-internal=concept-event-fire>fire an event</a> named <code id=seeking:event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> at the element.<li><p>⌛ <a href=#queue-a-media-element-task id=seeking:queue-a-media-element-task-3>Queue a media element task</a> given the <a href=#media-element id=seeking:media-element-6>media element</a> to
   <a href=https://dom.spec.whatwg.org/#concept-event-fire id=seeking:concept-event-fire-3 data-x-internal=concept-event-fire>fire an event</a> named <code id=seeking:event-media-seeked><a href=#event-media-seeked>seeked</a></code> at the element.</ol>

  <hr>

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-seekable data-dfn-type=attribute><code>seekable</code></dfn> attribute must return a new static
  <a href=#normalised-timeranges-object id=seeking:normalised-timeranges-object>normalized <code>TimeRanges</code> object</a> that represents the ranges of the
  <a href=#media-resource id=seeking:media-resource-5>media resource</a>, if any, that the user agent is able to seek to, at the time the
  attribute is evaluated.</p>

  <p class=note>If the user agent can seek to anywhere in the <a href=#media-resource id=seeking:media-resource-6>media resource</a>, e.g.
  because it is a simple movie file and the user agent and the server support HTTP Range requests,
  then the attribute would return an object with one range, whose start is the time of the first
  frame (the <a href=#earliest-possible-position id=seeking:earliest-possible-position-2>earliest possible position</a>, typically zero), and whose end is the same as
  the time of the first frame plus the <code id=seeking:dom-media-duration><a href=#dom-media-duration>duration</a></code> attribute's
  value (which would equal the time of the last frame, and might be positive Infinity).</p>

  <p class=note>The range might be continuously changing, e.g. if the user agent is buffering a
  sliding window on an infinite stream. This is the behavior seen with DVRs viewing live TV, for
  instance.</p>

  <p class=warning>Returning a new object each time is a bad pattern for attribute getters and is
  only enshrined here as it would be costly to change it. It is not to be copied to new APIs.</p>

  <p>User agents should adopt a very liberal and optimistic view of what is seekable. User
  agents should also buffer recent content where possible to enable seeking to be fast.</p>

  <p class=example>For instance, consider a large video file served on an HTTP server without
  support for HTTP Range requests. A browser <em>could</em> implement this by only buffering the
  current frame and data obtained for subsequent frames, never allow seeking, except for seeking to
  the very start by restarting the playback. However, this would be a poor implementation. A high
  quality implementation would buffer the last few minutes of content (or more, if sufficient
  storage space is available), allowing the user to jump back and rewatch something surprising
  without any latency, and would in addition allow arbitrary seeking by reloading the file from the
  start if necessary, which would be slower but still more convenient than having to literally
  restart the video and watch it all the way through just to get to an earlier unbuffered spot.</p>

  <p><a href=#media-resource id=seeking:media-resource-7>Media resources</a> might be internally scripted or
  interactive. Thus, a <a href=#media-element id=seeking:media-element-7>media element</a> could play in a non-linear fashion. If this
  happens, the user agent must act as if the algorithm for <a href=#dom-media-seek id=seeking:dom-media-seek-2>seeking</a> was used whenever the <a href=#current-playback-position id=seeking:current-playback-position-9>current playback position</a>
  changes in a discontinuous fashion (so that the relevant events fire).</p>

  


  <h5 id=media-resources-with-multiple-media-tracks><span class=secno>4.8.11.10</span> Media resources with multiple media tracks<a href=#media-resources-with-multiple-media-tracks class=self-link></a></h5>

  <p>A <a href=#media-resource id=media-resources-with-multiple-media-tracks:media-resource>media resource</a> can have multiple embedded audio and video tracks. For example,
  in addition to the primary video and audio tracks, a <a href=#media-resource id=media-resources-with-multiple-media-tracks:media-resource-2>media resource</a> could have
  foreign-language dubbed dialogues, director's commentaries, audio descriptions, alternative
  angles, or sign-language overlays.</p>

  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-media-audiotracks id=dom-media-audiotracks-dev>audioTracks</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/audioTracks title="The read-only audioTracks property on HTMLMediaElement objects returns an AudioTrackList object listing all of the AudioTrack objects representing the media element's audio tracks.">HTMLMediaElement/audioTracks</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns an <code id=media-resources-with-multiple-media-tracks:audiotracklist><a href=#audiotracklist>AudioTrackList</a></code> object representing the audio tracks available in the
    <a href=#media-resource id=media-resources-with-multiple-media-tracks:media-resource-3>media resource</a>.</p>
   <dt><code><var>media</var>.<a href=#dom-media-videotracks id=dom-media-videotracks-dev>videoTracks</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/videoTracks title="The read-only videoTracks property on HTMLMediaElement objects returns a VideoTrackList object listing all of the VideoTrack objects representing the media element's video tracks.">HTMLMediaElement/videoTracks</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns a <code id=media-resources-with-multiple-media-tracks:videotracklist><a href=#videotracklist>VideoTrackList</a></code> object representing the video tracks available in the
    <a href=#media-resource id=media-resources-with-multiple-media-tracks:media-resource-4>media resource</a>.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-audiotracks data-dfn-type=attribute><code>audioTracks</code></dfn> attribute of a <a href=#media-element id=media-resources-with-multiple-media-tracks:media-element>media element</a>
  must return a <a id=media-resources-with-multiple-media-tracks:live href=infrastructure.html#live>live</a> <code id=media-resources-with-multiple-media-tracks:audiotracklist-2><a href=#audiotracklist>AudioTrackList</a></code> object representing the audio tracks
  available in the <a href=#media-element id=media-resources-with-multiple-media-tracks:media-element-2>media element</a>'s <a href=#media-resource id=media-resources-with-multiple-media-tracks:media-resource-5>media resource</a>.</p>

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-videotracks data-dfn-type=attribute><code>videoTracks</code></dfn> attribute of a <a href=#media-element id=media-resources-with-multiple-media-tracks:media-element-3>media element</a>
  must return a <a id=media-resources-with-multiple-media-tracks:live-2 href=infrastructure.html#live>live</a> <code id=media-resources-with-multiple-media-tracks:videotracklist-2><a href=#videotracklist>VideoTrackList</a></code> object representing the video tracks
  available in the <a href=#media-element id=media-resources-with-multiple-media-tracks:media-element-4>media element</a>'s <a href=#media-resource id=media-resources-with-multiple-media-tracks:media-resource-6>media resource</a>.</p>

  <p class=note>There are only ever one <code id=media-resources-with-multiple-media-tracks:audiotracklist-3><a href=#audiotracklist>AudioTrackList</a></code> object and one
  <code id=media-resources-with-multiple-media-tracks:videotracklist-3><a href=#videotracklist>VideoTrackList</a></code> object per <a href=#media-element id=media-resources-with-multiple-media-tracks:media-element-5>media element</a>, even if another <a href=#media-resource id=media-resources-with-multiple-media-tracks:media-resource-7>media
  resource</a> is loaded into the element: the objects are reused. (The <code id=media-resources-with-multiple-media-tracks:audiotrack><a href=#audiotrack>AudioTrack</a></code>
  and <code id=media-resources-with-multiple-media-tracks:videotrack><a href=#videotrack>VideoTrack</a></code> objects are not, though.)</p>

  


  <h6 id=audiotracklist-and-videotracklist-objects><span class=secno>4.8.11.10.1</span> <code id=audiotracklist-and-videotracklist-objects:audiotracklist><a href=#audiotracklist>AudioTrackList</a></code> and <code id=audiotracklist-and-videotracklist-objects:videotracklist><a href=#videotracklist>VideoTrackList</a></code> objects<a href=#audiotracklist-and-videotracklist-objects class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList title="The AudioTrackList interface is used to represent a list of the audio tracks contained within a given HTML media element, with each track represented by a separate AudioTrack object in the list.">AudioTrackList</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList title="The VideoTrackList interface is used to represent a list of the video tracks contained within a <video> element, with each track represented by a separate VideoTrack object in the list.">VideoTrackList</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList title="The AudioTrackList interface is used to represent a list of the audio tracks contained within a given HTML media element, with each track represented by a separate AudioTrack object in the list.">AudioTrackList</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span><hr><span class=caniuse><span><a href="https://caniuse.com/#feat=audiotracks" title="Audio Tracks">caniuse.com table</a></span></span></div></div></div>

  <p>The <code id=audiotracklist-and-videotracklist-objects:audiotracklist-2><a href=#audiotracklist>AudioTrackList</a></code> and <code id=audiotracklist-and-videotracklist-objects:videotracklist-2><a href=#videotracklist>VideoTrackList</a></code> interfaces are used by
  attributes defined in the previous section.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrack title="The AudioTrack interface represents a single audio track from one of the HTML media elements, <audio> or <video>.">AudioTrack</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrack title="The VideoTrack interface represents a single video track from a <video> element.">VideoTrack</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='audiotracklist' data-dfn-type='interface'><c- g>AudioTrackList</c-></dfn> : <a id='audiotracklist-and-videotracklist-objects:eventtarget' href='https://dom.spec.whatwg.org/#interface-eventtarget' data-x-internal='eventtarget'><c- n>EventTarget</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-audiotracklist-length' id='audiotracklist-and-videotracklist-objects:dom-audiotracklist-length'><c- g>length</c-></a>;
  <a href='#dom-tracklist-item'><c- b>getter</c-></a> <a href='#audiotrack' id='audiotracklist-and-videotracklist-objects:audiotrack'><c- n>AudioTrack</c-></a> (<c- b>unsigned</c-> <c- b>long</c-> <c- g>index</c->);
  <a href='#audiotrack' id='audiotracklist-and-videotracklist-objects:audiotrack-2'><c- n>AudioTrack</c-></a>? <a href='#dom-audiotracklist-gettrackbyid' id='audiotracklist-and-videotracklist-objects:dom-audiotracklist-gettrackbyid'><c- g>getTrackById</c-></a>(<c- b>DOMString</c-> <c- g>id</c->);

  <c- b>attribute</c-> <a id='audiotracklist-and-videotracklist-objects:eventhandler' href='webappapis.html#eventhandler'><c- n>EventHandler</c-></a> <a href='#handler-tracklist-onchange' id='audiotracklist-and-videotracklist-objects:handler-tracklist-onchange'><c- g>onchange</c-></a>;
  <c- b>attribute</c-> <a id='audiotracklist-and-videotracklist-objects:eventhandler-2' href='webappapis.html#eventhandler'><c- n>EventHandler</c-></a> <a href='#handler-tracklist-onaddtrack' id='audiotracklist-and-videotracklist-objects:handler-tracklist-onaddtrack'><c- g>onaddtrack</c-></a>;
  <c- b>attribute</c-> <a id='audiotracklist-and-videotracklist-objects:eventhandler-3' href='webappapis.html#eventhandler'><c- n>EventHandler</c-></a> <a href='#handler-tracklist-onremovetrack' id='audiotracklist-and-videotracklist-objects:handler-tracklist-onremovetrack'><c- g>onremovetrack</c-></a>;
};

[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='audiotrack' data-dfn-type='interface'><c- g>AudioTrack</c-></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-audiotrack-id' id='audiotracklist-and-videotracklist-objects:dom-audiotrack-id'><c- g>id</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-audiotrack-kind' id='audiotracklist-and-videotracklist-objects:dom-audiotrack-kind'><c- g>kind</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-audiotrack-label' id='audiotracklist-and-videotracklist-objects:dom-audiotrack-label'><c- g>label</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-audiotrack-language' id='audiotracklist-and-videotracklist-objects:dom-audiotrack-language'><c- g>language</c-></a>;
  <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-audiotrack-enabled' id='audiotracklist-and-videotracklist-objects:dom-audiotrack-enabled'><c- g>enabled</c-></a>;
};

[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='videotracklist' data-dfn-type='interface'><c- g>VideoTrackList</c-></dfn> : <a id='audiotracklist-and-videotracklist-objects:eventtarget-2' href='https://dom.spec.whatwg.org/#interface-eventtarget' data-x-internal='eventtarget'><c- n>EventTarget</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-videotracklist-length' id='audiotracklist-and-videotracklist-objects:dom-videotracklist-length'><c- g>length</c-></a>;
  <a href='#dom-tracklist-item'><c- b>getter</c-></a> <a href='#videotrack' id='audiotracklist-and-videotracklist-objects:videotrack'><c- n>VideoTrack</c-></a> (<c- b>unsigned</c-> <c- b>long</c-> <c- g>index</c->);
  <a href='#videotrack' id='audiotracklist-and-videotracklist-objects:videotrack-2'><c- n>VideoTrack</c-></a>? <a href='#dom-videotracklist-gettrackbyid' id='audiotracklist-and-videotracklist-objects:dom-videotracklist-gettrackbyid'><c- g>getTrackById</c-></a>(<c- b>DOMString</c-> <c- g>id</c->);
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>long</c-> <a href='#dom-videotracklist-selectedindex' id='audiotracklist-and-videotracklist-objects:dom-videotracklist-selectedindex'><c- g>selectedIndex</c-></a>;

  <c- b>attribute</c-> <a id='audiotracklist-and-videotracklist-objects:eventhandler-4' href='webappapis.html#eventhandler'><c- n>EventHandler</c-></a> <a href='#handler-tracklist-onchange' id='audiotracklist-and-videotracklist-objects:handler-tracklist-onchange-2'><c- g>onchange</c-></a>;
  <c- b>attribute</c-> <a id='audiotracklist-and-videotracklist-objects:eventhandler-5' href='webappapis.html#eventhandler'><c- n>EventHandler</c-></a> <a href='#handler-tracklist-onaddtrack' id='audiotracklist-and-videotracklist-objects:handler-tracklist-onaddtrack-2'><c- g>onaddtrack</c-></a>;
  <c- b>attribute</c-> <a id='audiotracklist-and-videotracklist-objects:eventhandler-6' href='webappapis.html#eventhandler'><c- n>EventHandler</c-></a> <a href='#handler-tracklist-onremovetrack' id='audiotracklist-and-videotracklist-objects:handler-tracklist-onremovetrack-2'><c- g>onremovetrack</c-></a>;
};

[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='videotrack' data-dfn-type='interface'><c- g>VideoTrack</c-></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-videotrack-id' id='audiotracklist-and-videotracklist-objects:dom-videotrack-id'><c- g>id</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-videotrack-kind' id='audiotracklist-and-videotracklist-objects:dom-videotrack-kind'><c- g>kind</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-videotrack-label' id='audiotracklist-and-videotracklist-objects:dom-videotrack-label'><c- g>label</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-videotrack-language' id='audiotracklist-and-videotracklist-objects:dom-videotrack-language'><c- g>language</c-></a>;
  <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-videotrack-selected' id='audiotracklist-and-videotracklist-objects:dom-videotrack-selected'><c- g>selected</c-></a>;
};</code></pre>

  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-media-audiotracks id=audiotracklist-and-videotracklist-objects:dom-media-audiotracks>audioTracks</a>.<a href=#dom-audiotracklist-length id=dom-audiotracklist-length-dev>length</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList/length title="The read-only AudioTrackList property length returns the number of entries in the AudioTrackList, each of which is an AudioTrack representing one audio track in the media element. A value of 0 indicates that there are no audio tracks in the media.">AudioTrackList/length</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>media</var>.<a href=#dom-media-videotracks id=audiotracklist-and-videotracklist-objects:dom-media-videotracks>videoTracks</a>.<a href=#dom-videotracklist-length id=dom-videotracklist-length-dev>length</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/length title="The read-only VideoTrackList property length returns the number of entries in the VideoTrackList, each of which is a VideoTrack representing one video track in the media element.">VideoTrackList/length</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd><p>Returns the number of tracks in the list.<dt><code><var>audioTrack</var> = <var>media</var>.<a href=#dom-media-audiotracks id=audiotracklist-and-videotracklist-objects:dom-media-audiotracks-2>audioTracks</a>[<var>index</var>]</code><dt><code><var>videoTrack</var> = <var>media</var>.<a href=#dom-media-videotracks id=audiotracklist-and-videotracklist-objects:dom-media-videotracks-2>videoTracks</a>[<var>index</var>]</code><dd><p>Returns the specified <code id=audiotracklist-and-videotracklist-objects:audiotrack-3><a href=#audiotrack>AudioTrack</a></code> or <code id=audiotracklist-and-videotracklist-objects:videotrack-3><a href=#videotrack>VideoTrack</a></code> object.<dt><code><var>audioTrack</var> = <var>media</var>.<a href=#dom-media-audiotracks id=audiotracklist-and-videotracklist-objects:dom-media-audiotracks-3>audioTracks</a>.<a href=#dom-audiotracklist-gettrackbyid id=dom-audiotracklist-gettrackbyid-dev>getTrackById</a>(<var>id</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList/getTrackById title="The AudioTrackList method getTrackById() returns the first AudioTrack object from the track list whose id matches the specified string. This lets you find a specified track if you know its ID string.">AudioTrackList/getTrackById</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>videoTrack</var> = <var>media</var>.<a href=#dom-media-videotracks id=audiotracklist-and-videotracklist-objects:dom-media-videotracks-3>videoTracks</a>.<a href=#dom-videotracklist-gettrackbyid id=dom-videotracklist-gettrackbyid-dev>getTrackById</a>(<var>id</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/getTrackById title="The VideoTrackList method getTrackById() returns the first VideoTrack object from the track list whose id matches the specified string.">VideoTrackList/getTrackById</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns the <code id=audiotracklist-and-videotracklist-objects:audiotrack-4><a href=#audiotrack>AudioTrack</a></code> or <code id=audiotracklist-and-videotracklist-objects:videotrack-4><a href=#videotrack>VideoTrack</a></code> object with the given
    identifier, or null if no track has that identifier.</p>
   <dt><code><var>audioTrack</var>.<a href=#dom-audiotrack-id id=dom-audiotrack-id-dev>id</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrack/id title="The id property contains a string which uniquely identifies the track represented by the AudioTrack.">AudioTrack/id</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>videoTrack</var>.<a href=#dom-videotrack-id id=dom-videotrack-id-dev>id</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrack/id title="The id property contains a string which uniquely identifies the track represented by the VideoTrack.">VideoTrack/id</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns the ID of the given track. This is the ID that can be used with a <a href=https://url.spec.whatwg.org/#concept-url-fragment id=audiotracklist-and-videotracklist-objects:concept-url-fragment data-x-internal=concept-url-fragment>fragment</a> if the format supports <a id=audiotracklist-and-videotracklist-objects:media-fragment-syntax href=https://www.w3.org/TR/media-frags/#media-fragment-syntax data-x-internal=media-fragment-syntax>media fragment
    syntax</a>, and that can be used with the <code>getTrackById()</code> method.</p>
   <dt><code><var>audioTrack</var>.<a href=#dom-audiotrack-kind id=dom-audiotrack-kind-dev>kind</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrack/kind title="The kind property contains a string indicating the category of audio contained in the AudioTrack.">AudioTrack/kind</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>videoTrack</var>.<a href=#dom-videotrack-kind id=dom-videotrack-kind-dev>kind</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrack/kind title="The kind property contains a string indicating the category of video contained in the VideoTrack.">VideoTrack/kind</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd><p>Returns the category the given track falls into. The <a href=#dom-TrackList-getKind-categories>possible track categories</a> are given below.<dt><code><var>audioTrack</var>.<a href=#dom-audiotrack-label id=dom-audiotrack-label-dev>label</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrack/label title="The read-only AudioTrack property label returns a string specifying the audio track's human-readable label, if one is available; otherwise, it returns an empty string.">AudioTrack/label</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>videoTrack</var>.<a href=#dom-videotrack-label id=dom-videotrack-label-dev>label</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrack/label title="The read-only VideoTrack property label returns a string specifying the video track's human-readable label, if one is available; otherwise, it returns an empty string.">VideoTrack/label</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd><p>Returns the label of the given track, if known, or the empty string otherwise.<dt><code><var>audioTrack</var>.<a href=#dom-audiotrack-language id=dom-audiotrack-language-dev>language</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrack/language title="The read-only AudioTrack property language returns a string identifying the language used in the audio track.">AudioTrack/language</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dt><code><var>videoTrack</var>.<a href=#dom-videotrack-language id=dom-videotrack-language-dev>language</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrack/language title="The read-only VideoTrack property language returns a string identifying the language used in the video track.">VideoTrack/language</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd><p>Returns the language of the given track, if known, or the empty string otherwise.<dt><code><var>audioTrack</var>.<a href=#dom-audiotrack-enabled id=dom-audiotrack-enabled-dev>enabled</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrack/enabled title="The AudioTrack property enabled specifies whether or not the described audio track is currently enabled for use. If the track is disabled by setting enabled to false, the track is muted and does not produce audio.">AudioTrack/enabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns true if the given track is active, and false otherwise.</p>

    <p>Can be set, to change whether the track is enabled or not. If multiple audio tracks are
    enabled simultaneously, they are mixed.</p>
   <dt><code><var>media</var>.<a href=#dom-media-videotracks id=audiotracklist-and-videotracklist-objects:dom-media-videotracks-4>videoTracks</a>.<a href=#dom-videotracklist-selectedindex id=dom-videotracklist-selectedindex-dev>selectedIndex</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/selectedIndex title="The read-only VideoTrackList property selectedIndex returns the index of the currently selected track, if any, or -1 otherwise.">VideoTrackList/selectedIndex</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd><p>Returns the index of the currently selected track, if any, or −1
   otherwise.<dt><code><var>videoTrack</var>.<a href=#dom-videotrack-selected id=dom-videotrack-selected-dev>selected</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrack/selected title="The VideoTrack property selected controls whether or not a particular video track is active.">VideoTrack/selected</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns true if the given track is active, and false otherwise.</p>

    <p>Can be set, to change whether the track is selected or not. Either zero or one video track is
    selected; selecting a new track while a previous one is selected will unselect the previous
    one.</p>
   </dl>

  

  <p>An <code id=audiotracklist-and-videotracklist-objects:audiotracklist-3><a href=#audiotracklist>AudioTrackList</a></code> object represents a dynamic list of zero or more audio tracks,
  of which zero or more can be enabled at a time. Each audio track is represented by an
  <code id=audiotracklist-and-videotracklist-objects:audiotrack-5><a href=#audiotrack>AudioTrack</a></code> object.</p>

  <p>A <code id=audiotracklist-and-videotracklist-objects:videotracklist-3><a href=#videotracklist>VideoTrackList</a></code> object represents a dynamic list of zero or more video tracks, of
  which zero or one can be selected at a time. Each video track is represented by a
  <code id=audiotracklist-and-videotracklist-objects:videotrack-5><a href=#videotrack>VideoTrack</a></code> object.</p>

  <p>Tracks in <code id=audiotracklist-and-videotracklist-objects:audiotracklist-4><a href=#audiotracklist>AudioTrackList</a></code> and <code id=audiotracklist-and-videotracklist-objects:videotracklist-4><a href=#videotracklist>VideoTrackList</a></code> objects must be
  consistently ordered. If the <a href=#media-resource id=audiotracklist-and-videotracklist-objects:media-resource>media resource</a> is in a format that defines an order,
  then that order must be used; otherwise, the order must be the relative order in which the tracks
  are declared in the <a href=#media-resource id=audiotracklist-and-videotracklist-objects:media-resource-2>media resource</a>. The order used is called the <i>natural order</i>
  of the list.</p>

  <p class=note>Each track in one of these objects thus has an index; the first has the index
  0, and each subsequent track is numbered one higher than the previous one. If a <a href=#media-resource id=audiotracklist-and-videotracklist-objects:media-resource-3>media
  resource</a> dynamically adds or removes audio or video tracks, then the indices of the tracks
  will change dynamically. If the <a href=#media-resource id=audiotracklist-and-videotracklist-objects:media-resource-4>media resource</a> changes entirely, then all the
  previous tracks will be removed and replaced with new tracks.</p>

  <p>The <code id=audiotracklist-and-videotracklist-objects:audiotracklist-5><a href=#audiotracklist>AudioTrackList</a></code> <dfn data-dfn-for=AudioTrackList id=dom-audiotracklist-length data-dfn-type=attribute><code>length</code></dfn> and <code id=audiotracklist-and-videotracklist-objects:videotracklist-5><a href=#videotracklist>VideoTrackList</a></code>
  <dfn data-dfn-for=VideoTrackList id=dom-videotracklist-length data-dfn-type=attribute><code>length</code></dfn>
  attribute getters must return the number of tracks represented by their objects at the time of
  getting.</p>

  <p>The <a id=audiotracklist-and-videotracklist-objects:supported-property-indices href=https://webidl.spec.whatwg.org/#dfn-supported-property-indices data-x-internal=supported-property-indices>supported property indices</a> of <code id=audiotracklist-and-videotracklist-objects:audiotracklist-6><a href=#audiotracklist>AudioTrackList</a></code> and
  <code id=audiotracklist-and-videotracklist-objects:videotracklist-6><a href=#videotracklist>VideoTrackList</a></code> objects at any instant are the numbers from zero to the number of
  tracks represented by the respective object minus one, if any tracks are represented. If an
  <code id=audiotracklist-and-videotracklist-objects:audiotracklist-7><a href=#audiotracklist>AudioTrackList</a></code> or <code id=audiotracklist-and-videotracklist-objects:videotracklist-7><a href=#videotracklist>VideoTrackList</a></code> object represents no tracks, it has no
  <a id=audiotracklist-and-videotracklist-objects:supported-property-indices-2 href=https://webidl.spec.whatwg.org/#dfn-supported-property-indices data-x-internal=supported-property-indices>supported property indices</a>.</p>

  <p id=dom-tracklist-item>To <a id=audiotracklist-and-videotracklist-objects:determine-the-value-of-an-indexed-property href=https://webidl.spec.whatwg.org/#dfn-determine-the-value-of-an-indexed-property data-x-internal=determine-the-value-of-an-indexed-property>determine the value of an indexed property</a> for a
  given index <var>index</var> in an <code id=audiotracklist-and-videotracklist-objects:audiotracklist-8><a href=#audiotracklist>AudioTrackList</a></code> or <code id=audiotracklist-and-videotracklist-objects:videotracklist-8><a href=#videotracklist>VideoTrackList</a></code>
  object <var>list</var>, the user agent must return the <code id=audiotracklist-and-videotracklist-objects:audiotrack-6><a href=#audiotrack>AudioTrack</a></code> or
  <code id=audiotracklist-and-videotracklist-objects:videotrack-6><a href=#videotrack>VideoTrack</a></code> object that represents the <var>index</var>th track in <var>list</var>.</p>

  <p>The <code id=audiotracklist-and-videotracklist-objects:audiotracklist-9><a href=#audiotracklist>AudioTrackList</a></code> <dfn data-dfn-for=AudioTrackList id=dom-audiotracklist-gettrackbyid data-dfn-type=method><code>getTrackById(<var>id</var>)</code></dfn> and
  <code id=audiotracklist-and-videotracklist-objects:videotracklist-9><a href=#videotracklist>VideoTrackList</a></code> <dfn data-dfn-for=VideoTrackList id=dom-videotracklist-gettrackbyid data-dfn-type=method><code>getTrackById(<var>id</var>)</code></dfn> methods must
  return the first <code id=audiotracklist-and-videotracklist-objects:audiotrack-7><a href=#audiotrack>AudioTrack</a></code> or <code id=audiotracklist-and-videotracklist-objects:videotrack-7><a href=#videotrack>VideoTrack</a></code> object (respectively) in the
  <code id=audiotracklist-and-videotracklist-objects:audiotracklist-10><a href=#audiotracklist>AudioTrackList</a></code> or <code id=audiotracklist-and-videotracklist-objects:videotracklist-10><a href=#videotracklist>VideoTrackList</a></code> object (respectively) whose identifier
  is equal to the value of the <var>id</var> argument (in the natural order of the list, as defined
  above). When no tracks match the given argument, the methods must return null.</p>

  <p>The <code id=audiotracklist-and-videotracklist-objects:audiotrack-8><a href=#audiotrack>AudioTrack</a></code> and <code id=audiotracklist-and-videotracklist-objects:videotrack-8><a href=#videotrack>VideoTrack</a></code> objects represent specific tracks of a
  <a href=#media-resource id=audiotracklist-and-videotracklist-objects:media-resource-5>media resource</a>. Each track can have an identifier, category, label, and language.
  These aspects of a track are permanent for the lifetime of the track; even if a track is removed
  from a <a href=#media-resource id=audiotracklist-and-videotracklist-objects:media-resource-6>media resource</a>'s <code id=audiotracklist-and-videotracklist-objects:audiotracklist-11><a href=#audiotracklist>AudioTrackList</a></code> or <code id=audiotracklist-and-videotracklist-objects:videotracklist-11><a href=#videotracklist>VideoTrackList</a></code>
  objects, those aspects do not change.</p>

  <p>In addition, <code id=audiotracklist-and-videotracklist-objects:audiotrack-9><a href=#audiotrack>AudioTrack</a></code> objects can each be enabled or disabled; this is the audio
  track's <i>enabled state</i>. When an <code id=audiotracklist-and-videotracklist-objects:audiotrack-10><a href=#audiotrack>AudioTrack</a></code> is created, its <i>enabled state</i>
  must be set to false (disabled). The <a href=#concept-media-load-resource id=audiotracklist-and-videotracklist-objects:concept-media-load-resource>resource fetch
  algorithm</a> can override this.</p>

  <p>Similarly, a single <code id=audiotracklist-and-videotracklist-objects:videotrack-9><a href=#videotrack>VideoTrack</a></code> object per <code id=audiotracklist-and-videotracklist-objects:videotracklist-12><a href=#videotracklist>VideoTrackList</a></code> object can
  be selected, this is the video track's <i>selection state</i>. When a <code id=audiotracklist-and-videotracklist-objects:videotrack-10><a href=#videotrack>VideoTrack</a></code> is
  created, its <i>selection state</i> must be set to false (not selected). The <a href=#concept-media-load-resource id=audiotracklist-and-videotracklist-objects:concept-media-load-resource-2>resource fetch algorithm</a> can override this.</p>

  <p>The <code id=audiotracklist-and-videotracklist-objects:audiotrack-11><a href=#audiotrack>AudioTrack</a></code> <dfn data-dfn-for=AudioTrack id=dom-audiotrack-id data-dfn-type=attribute><code>id</code></dfn> and <code id=audiotracklist-and-videotracklist-objects:videotrack-11><a href=#videotrack>VideoTrack</a></code> <dfn data-dfn-for=VideoTrack id=dom-videotrack-id data-dfn-type=attribute><code>id</code></dfn> attributes must return the
  identifier of the track, if it has one, or the empty string otherwise. If the <a href=#media-resource id=audiotracklist-and-videotracklist-objects:media-resource-7>media
  resource</a> is in a format that supports <a id=audiotracklist-and-videotracklist-objects:media-fragment-syntax-2 href=https://www.w3.org/TR/media-frags/#media-fragment-syntax data-x-internal=media-fragment-syntax>media fragment syntax</a>, the identifier
  returned for a particular track must be the same identifier that would enable the track if used as
  the name of a track in the track dimension of such a <a href=https://url.spec.whatwg.org/#concept-url-fragment id=audiotracklist-and-videotracklist-objects:concept-url-fragment-2 data-x-internal=concept-url-fragment>fragment</a>. <a href=references.html#refsINBAND>[INBAND]</a></p>

  <p class=example>For example, in Ogg files, this would be the Name header field of the track.
  <a href=references.html#refsOGGSKELETONHEADERS>[OGGSKELETONHEADERS]</a></p>

  <p>The <code id=audiotracklist-and-videotracklist-objects:audiotrack-12><a href=#audiotrack>AudioTrack</a></code> <dfn data-dfn-for=AudioTrack id=dom-audiotrack-kind data-dfn-type=attribute><code>kind</code></dfn> and <code id=audiotracklist-and-videotracklist-objects:videotrack-12><a href=#videotrack>VideoTrack</a></code> <dfn data-dfn-for=VideoTrack id=dom-videotrack-kind data-dfn-type=attribute><code>kind</code></dfn> attributes must return the
  category of the track, if it has one, or the empty string otherwise.</p>

  <p>The category of a track is the string given in the first column of the table below that is the
  most appropriate for the track based on the definitions in the table's second and third columns,
  as determined by the metadata included in the track in the <a href=#media-resource id=audiotracklist-and-videotracklist-objects:media-resource-8>media resource</a>. The cell
  in the third column of a row says what the category given in the cell in the first column of that
  row applies to; a category is only appropriate for an audio track if it applies to audio tracks,
  and a category is only appropriate for video tracks if it applies to video tracks. Categories must
  only be returned for <code id=audiotracklist-and-videotracklist-objects:audiotrack-13><a href=#audiotrack>AudioTrack</a></code> objects if they are appropriate for audio, and must
  only be returned for <code id=audiotracklist-and-videotracklist-objects:videotrack-13><a href=#videotrack>VideoTrack</a></code> objects if they are appropriate for video.</p>

  <p>For Ogg files, the Role header field of the track gives the relevant metadata. For DASH media
  resources, the <code>Role</code> element conveys the information. For WebM, only the
  <code>FlagDefault</code> element currently maps to a value. <cite>Sourcing In-band
  Media Resource Tracks from Media Containers into HTML</cite> has further details.
  <a href=references.html#refsOGGSKELETONHEADERS>[OGGSKELETONHEADERS]</a> <a href=references.html#refsDASH>[DASH]</a> <a href=references.html#refsWEBMCG>[WEBMCG]</a> <a href=references.html#refsINBAND>[INBAND]</a></p>

  

  <table id=dom-TrackList-getKind-categories><caption>Return values for <code id=audiotracklist-and-videotracklist-objects:audiotrack-14><a href=#audiotrack>AudioTrack</a></code>'s <code id=audiotracklist-and-videotracklist-objects:dom-audiotrack-kind-2><a href=#dom-audiotrack-kind>kind</a></code> and <code id=audiotracklist-and-videotracklist-objects:videotrack-14><a href=#videotrack>VideoTrack</a></code>'s <code id=audiotracklist-and-videotracklist-objects:dom-videotrack-kind-2><a href=#dom-videotrack-kind>kind</a></code></caption><thead><tr><th>Category
     <th>Definition
     <th>Applies to...<th>Examples
   <tbody><tr><td>"<dfn id=value-track-kind-alternate><code>alternative</code></dfn>"
     <td>A possible alternative to the main track, e.g. a different take of a song (audio), or a different angle (video).
     <td>Audio and video.
     <td>Ogg: "audio/alternate" or "video/alternate"; DASH: "alternate" without "main" and "commentary" roles, and, for audio, without the "dub" role (other roles ignored).

    <tr><td>"<dfn id=value-track-kind-caption><code>captions</code></dfn>"
     <td>A version of the main video track with captions burnt in. (For legacy content; new content would use text tracks.)
     <td>Video only.
     <td>DASH: "caption" and "main" roles together (other roles ignored).

    <tr><td>"<dfn id=value-track-kind-descriptions><code>descriptions</code></dfn>"
     <td>An audio description of a video track.
     <td>Audio only.
     <td>Ogg: "audio/audiodesc".

    <tr><td>"<dfn id=value-track-kind-main><code>main</code></dfn>"
     <td>The primary audio or video track.
     <td>Audio and video.
     <td>Ogg: "audio/main" or "video/main"; WebM: the "FlagDefault" element is set; DASH: "main" role without "caption", "subtitle", and "dub" roles (other roles ignored).

    <tr><td>"<dfn id=value-track-kind-main-desc><code>main-desc</code></dfn>"
     <td>The primary audio track, mixed with audio descriptions.
     <td>Audio only.
     <td>AC3 audio in MPEG-2 TS: bsmod=2 and full_svc=1. 

    <tr><td>"<dfn id=value-track-kind-sign><code>sign</code></dfn>"
     <td>A sign-language interpretation of an audio track.
     <td>Video only.
     <td>Ogg: "video/sign".

    <tr><td>"<dfn id=value-track-kind-subtitle><code>subtitles</code></dfn>"
     <td>A version of the main video track with subtitles burnt in. (For legacy content; new content would use text tracks.)
     <td>Video only.
     <td>DASH: "subtitle" and "main" roles together (other roles ignored).

    <tr><td>"<dfn id=value-track-kind-translation><code>translation</code></dfn>"
     <td>A translated version of the main audio track.
     <td>Audio only.
     <td>Ogg: "audio/dub". DASH: "dub" and "main" roles together (other roles ignored).

    <tr><td>"<dfn id=value-track-kind-commentary><code>commentary</code></dfn>"
     <td>Commentary on the primary audio or video track, e.g. a director's commentary.
     <td>Audio and video.
     <td>DASH: "commentary" role without "main" role (other roles ignored).

    <tr><td>"<dfn id=value-track-kind-none><code></code></dfn>" (empty string)
     <td>No explicit kind, or the kind given by the track's metadata is not recognized by the user agent.
     <td>Audio and video.
     <td>

  </table>

  

  <p>The <code id=audiotracklist-and-videotracklist-objects:audiotrack-15><a href=#audiotrack>AudioTrack</a></code> <dfn data-dfn-for=AudioTrack id=dom-audiotrack-label data-dfn-type=attribute><code>label</code></dfn> and <code id=audiotracklist-and-videotracklist-objects:videotrack-15><a href=#videotrack>VideoTrack</a></code> <dfn data-dfn-for=VideoTrack id=dom-videotrack-label data-dfn-type=attribute><code>label</code></dfn> attributes must return the
  label of the track, if it has one, or the empty string otherwise. <a href=references.html#refsINBAND>[INBAND]</a></p>

  <p>The <code id=audiotracklist-and-videotracklist-objects:audiotrack-16><a href=#audiotrack>AudioTrack</a></code> <dfn data-dfn-for=AudioTrack id=dom-audiotrack-language data-dfn-type=attribute><code>language</code></dfn> and <code id=audiotracklist-and-videotracklist-objects:videotrack-16><a href=#videotrack>VideoTrack</a></code> <dfn data-dfn-for=VideoTrack id=dom-videotrack-language data-dfn-type=attribute><code>language</code></dfn> attributes must
  return the BCP 47 language tag of the language of the track, if it has one, or the empty string
  otherwise. If the user agent is not able to express that language as a BCP 47 language tag (for
  example because the language information in the <a href=#media-resource id=audiotracklist-and-videotracklist-objects:media-resource-9>media resource</a>'s format is a
  free-form string without a defined interpretation), then the method must return the empty string,
  as if the track had no language. <a href=references.html#refsINBAND>[INBAND]</a></p>

  <p>The <code id=audiotracklist-and-videotracklist-objects:audiotrack-17><a href=#audiotrack>AudioTrack</a></code> <dfn data-dfn-for=AudioTrack id=dom-audiotrack-enabled data-dfn-type=attribute><code>enabled</code></dfn> attribute, on getting, must return true if
  the track is currently enabled, and false otherwise. On setting, it must enable the track if the
  new value is true, and disable it otherwise. (If the track is no longer in an
  <code id=audiotracklist-and-videotracklist-objects:audiotracklist-12><a href=#audiotracklist>AudioTrackList</a></code> object, then the track being enabled or disabled has no effect beyond
  changing the value of the attribute on the <code id=audiotracklist-and-videotracklist-objects:audiotrack-18><a href=#audiotrack>AudioTrack</a></code> object.)</p>

  <p id=toggle-audio-track>Whenever an audio track in an <code id=audiotracklist-and-videotracklist-objects:audiotracklist-13><a href=#audiotracklist>AudioTrackList</a></code> that was
  disabled is enabled, and whenever one that was enabled is disabled, the user agent must
  <a href=#queue-a-media-element-task id=audiotracklist-and-videotracklist-objects:queue-a-media-element-task>queue a media element task</a> given the <a href=#media-element id=audiotracklist-and-videotracklist-objects:media-element>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=audiotracklist-and-videotracklist-objects:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=audiotracklist-and-videotracklist-objects:event-media-change><a href=#event-media-change>change</a></code> at the <code id=audiotracklist-and-videotracklist-objects:audiotracklist-14><a href=#audiotracklist>AudioTrackList</a></code> object.</p>

  <p>An audio track that has no data for a particular position on the <a href=#media-timeline id=audiotracklist-and-videotracklist-objects:media-timeline>media timeline</a>,
  or that does not exist at that position, must be interpreted as being silent at that point on the
  timeline.</p>

  <p>The <code id=audiotracklist-and-videotracklist-objects:videotracklist-13><a href=#videotracklist>VideoTrackList</a></code> <dfn data-dfn-for=VideoTrackList id=dom-videotracklist-selectedindex data-dfn-type=attribute><code>selectedIndex</code></dfn> attribute must return the
  index of the currently selected track, if any. If the <code id=audiotracklist-and-videotracklist-objects:videotracklist-14><a href=#videotracklist>VideoTrackList</a></code> object does not
  currently represent any tracks, or if none of the tracks are selected, it must instead return
  −1.</p>

  <p>The <code id=audiotracklist-and-videotracklist-objects:videotrack-17><a href=#videotrack>VideoTrack</a></code> <dfn data-dfn-for=VideoTrack id=dom-videotrack-selected data-dfn-type=attribute><code>selected</code></dfn> attribute, on getting, must return true if
  the track is currently selected, and false otherwise. On setting, it must select the track if the
  new value is true, and unselect it otherwise. If the track is in a <code id=audiotracklist-and-videotracklist-objects:videotracklist-15><a href=#videotracklist>VideoTrackList</a></code>,
  then all the other <code id=audiotracklist-and-videotracklist-objects:videotrack-18><a href=#videotrack>VideoTrack</a></code> objects in that list must be unselected. (If the track
  is no longer in a <code id=audiotracklist-and-videotracklist-objects:videotracklist-16><a href=#videotracklist>VideoTrackList</a></code> object, then the track being selected or unselected
  has no effect beyond changing the value of the attribute on the <code id=audiotracklist-and-videotracklist-objects:videotrack-19><a href=#videotrack>VideoTrack</a></code>
  object.)</p>

  <p id=toggle-video-track>Whenever a track in a <code id=audiotracklist-and-videotracklist-objects:videotracklist-17><a href=#videotracklist>VideoTrackList</a></code> that was previously
  not selected is selected, and whenever the selected track in a <code id=audiotracklist-and-videotracklist-objects:videotracklist-18><a href=#videotracklist>VideoTrackList</a></code> is
  unselected without a new track being selected in its stead, the user agent must <a href=#queue-a-media-element-task id=audiotracklist-and-videotracklist-objects:queue-a-media-element-task-2>queue a
  media element task</a> given the <a href=#media-element id=audiotracklist-and-videotracklist-objects:media-element-2>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=audiotracklist-and-videotracklist-objects:concept-event-fire-2 data-x-internal=concept-event-fire>fire an event</a> named <code id=audiotracklist-and-videotracklist-objects:event-media-change-2><a href=#event-media-change>change</a></code> at the <code id=audiotracklist-and-videotracklist-objects:videotracklist-19><a href=#videotracklist>VideoTrackList</a></code> object. This <a href=webappapis.html#concept-task id=audiotracklist-and-videotracklist-objects:concept-task>task</a> must be <a href=webappapis.html#queue-an-element-task id=audiotracklist-and-videotracklist-objects:queue-an-element-task>queued</a>
  before the <a href=webappapis.html#concept-task id=audiotracklist-and-videotracklist-objects:concept-task-2>task</a> that fires the <code id=audiotracklist-and-videotracklist-objects:event-media-resize><a href=#event-media-resize>resize</a></code> event, if any.</p>

  <p>A video track that has no data for a particular position on the <a href=#media-timeline id=audiotracklist-and-videotracklist-objects:media-timeline-2>media timeline</a>
  must be interpreted as being <a id=audiotracklist-and-videotracklist-objects:transparent-black href=https://drafts.csswg.org/css-color/#transparent-black data-x-internal=transparent-black>transparent black</a> at that point on the timeline, with
  the same dimensions as the last frame before that position, or, if the position is before all the
  data for that track, the same dimensions as the first frame for that track. A track that does not
  exist at all at the current position must be treated as if it existed but had no data.</p>

  <p class=example>For instance, if a video has a track that is only introduced after one hour of
  playback, and the user selects that track then goes back to the start, then the user agent will
  act as if that track started at the start of the <a href=#media-resource id=audiotracklist-and-videotracklist-objects:media-resource-10>media resource</a> but was simply
  transparent until one hour in.</p>

  <hr>

  <p>The following are the <a id=audiotracklist-and-videotracklist-objects:event-handlers href=webappapis.html#event-handlers>event handlers</a> (and their corresponding <a href=webappapis.html#event-handler-event-type id=audiotracklist-and-videotracklist-objects:event-handler-event-type>event handler event types</a>) that must be supported, as <a id=audiotracklist-and-videotracklist-objects:event-handler-idl-attributes href=webappapis.html#event-handler-idl-attributes>event handler IDL attributes</a>,
  by all objects implementing the <code id=audiotracklist-and-videotracklist-objects:audiotracklist-15><a href=#audiotracklist>AudioTrackList</a></code> and <code id=audiotracklist-and-videotracklist-objects:videotracklist-20><a href=#videotracklist>VideoTrackList</a></code>
  interfaces:</p>

  <table><thead><tr><th><a href=webappapis.html#event-handlers id=audiotracklist-and-videotracklist-objects:event-handlers-2>Event handler</a> <th><a id=audiotracklist-and-videotracklist-objects:event-handler-event-type-2 href=webappapis.html#event-handler-event-type>Event handler event type</a>
   <tbody><tr><td><dfn data-dfn-for=AudioTrackList,VideoTrackList id=handler-tracklist-onchange data-dfn-type=attribute><code>onchange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList/change_event title="The change event is fired when an audio track is enabled or disabled, for example by changing the track's enabled property.">AudioTrackList/change_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList/change_event title="The change event is fired when a text track is made active or inactive, or a TextTrackList is otherwise changed.">TextTrackList/change_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>33+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/change_event title="The change event is fired when a video track is made active or inactive, for example by changing the track's selected property.">VideoTrackList/change_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=audiotracklist-and-videotracklist-objects:event-media-change-3><a href=#event-media-change>change</a></code>
    <tr><td><dfn data-dfn-for=AudioTrackList,VideoTrackList id=handler-tracklist-onaddtrack data-dfn-type=attribute><code>onaddtrack</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList/addtrack_event title="The addtrack event is fired when a track is added to an AudioTrackList.">AudioTrackList/addtrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList/addtrack_event title="The addtrack event is fired when a track is added to a TextTrackList.">TextTrackList/addtrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>11</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/addtrack_event title="The addtrack event is fired when a video track is added to a VideoTrackList.">VideoTrackList/addtrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=audiotracklist-and-videotracklist-objects:event-media-addtrack><a href=#event-media-addtrack>addtrack</a></code>
    <tr><td><dfn data-dfn-for=AudioTrackList,VideoTrackList id=handler-tracklist-onremovetrack data-dfn-type=attribute><code>onremovetrack</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList/removetrack_event title="The removetrack event is fired when a track is removed from an AudioTrackList.">AudioTrackList/removetrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList/removetrack_event title="The removetrack event is fired when a track is removed from a TextTrackList.">TextTrackList/removetrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>33+</span></span><hr><span class="opera yes"><span>Opera</span><span>20+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>20+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/removetrack_event title="The removetrack event is fired when a video track is removed from a VideoTrackList.">VideoTrackList/removetrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td> <code id=audiotracklist-and-videotracklist-objects:event-media-removetrack><a href=#event-media-removetrack>removetrack</a></code>
  </table>

  

  


  <h6 id=selecting-specific-audio-and-video-tracks-declaratively><span class=secno>4.8.11.10.2</span> Selecting specific audio and video tracks declaratively<a href=#selecting-specific-audio-and-video-tracks-declaratively class=self-link></a></h6>

  <p>The <code id=selecting-specific-audio-and-video-tracks-declaratively:dom-media-audiotracks><a href=#dom-media-audiotracks>audioTracks</a></code> and <code id=selecting-specific-audio-and-video-tracks-declaratively:dom-media-videotracks><a href=#dom-media-videotracks>videoTracks</a></code> attributes allow scripts to select which track
  should play, but it is also possible to select specific tracks declaratively, by specifying
  particular tracks in the <a href=https://url.spec.whatwg.org/#concept-url-fragment id=selecting-specific-audio-and-video-tracks-declaratively:concept-url-fragment data-x-internal=concept-url-fragment>fragment</a> of the
  <a id=selecting-specific-audio-and-video-tracks-declaratively:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the <a href=#media-resource id=selecting-specific-audio-and-video-tracks-declaratively:media-resource>media resource</a>. The format of the <a href=https://url.spec.whatwg.org/#concept-url-fragment id=selecting-specific-audio-and-video-tracks-declaratively:concept-url-fragment-2 data-x-internal=concept-url-fragment>fragment</a> depends on the <a id=selecting-specific-audio-and-video-tracks-declaratively:mime-type href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> of the
  <a href=#media-resource id=selecting-specific-audio-and-video-tracks-declaratively:media-resource-2>media resource</a>. <a href=references.html#refsRFC2046>[RFC2046]</a> <a href=references.html#refsURL>[URL]</a></p>

  <div class=example>

   <p>In this example, a video that uses a format that supports <a id=selecting-specific-audio-and-video-tracks-declaratively:media-fragment-syntax href=https://www.w3.org/TR/media-frags/#media-fragment-syntax data-x-internal=media-fragment-syntax>media fragment syntax</a>
   is embedded in such a way that the alternative angles labeled "Alternative" are enabled instead
   of the default video track.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>video</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;myvideo#track=Alternative&quot;</c-><c- p>&gt;&lt;/</c-><c- f>video</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h5 id=timed-text-tracks><span class=secno>4.8.11.11</span> Timed text tracks<a href=#timed-text-tracks class=self-link></a></h5>

  <h6 id=text-track-model><span class=secno>4.8.11.11.1</span> Text track model<a href=#text-track-model class=self-link></a></h6>

  <p>A <a href=#media-element id=text-track-model:media-element>media element</a> can have a group of associated <dfn id=text-track>text
  tracks</dfn>, known as the <a href=#media-element id=text-track-model:media-element-2>media element</a>'s <dfn id=list-of-text-tracks>list of text tracks</dfn>. The <a href=#text-track id=text-track-model:text-track>text tracks</a> are sorted as follows:</p>

  <ol><li><p>The <a href=#text-track id=text-track-model:text-track-2>text tracks</a> corresponding to <code id=text-track-model:the-track-element><a href=#the-track-element>track</a></code>
   element children of the <a href=#media-element id=text-track-model:media-element-3>media element</a>, in <a id=text-track-model:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>.<li><p>Any <a href=#text-track id=text-track-model:text-track-3>text tracks</a> added using the <code id=text-track-model:dom-media-addtexttrack><a href=#dom-media-addtexttrack>addTextTrack()</a></code> method, in the order they were added,
   oldest first.<li><p>Any <a href=#media-resource-specific-text-track id=text-track-model:media-resource-specific-text-track>media-resource-specific text
   tracks</a> (<a href=#text-track id=text-track-model:text-track-4>text tracks</a> corresponding to data in the
   <a href=#media-resource id=text-track-model:media-resource>media resource</a>), in the order defined by the <a href=#media-resource id=text-track-model:media-resource-2>media resource</a>'s format
   specification.</ol>

  <p>A <a href=#text-track id=text-track-model:text-track-5>text track</a> consists of:</p>

  <dl><dt><dfn id=text-track-kind>The kind of text track</dfn>

   <dd>
    <p>This decides how the track is handled by the user agent. The kind is represented by a string.
    The possible strings are:</p>

    <ul class=brief><li><dfn id=dom-texttrack-kind-subtitles><code>subtitles</code></dfn>
     <li><dfn id=dom-texttrack-kind-captions><code>captions</code></dfn>
     <li><dfn id=dom-texttrack-kind-descriptions><code>descriptions</code></dfn>
     <li><dfn id=dom-texttrack-kind-chapters><code>chapters</code></dfn>
     <li><dfn id=dom-texttrack-kind-metadata><code>metadata</code></dfn>
    </ul>

    <p>The <a href=#text-track-kind id=text-track-model:text-track-kind>kind of track</a> can change dynamically, in the case of
    a <a href=#text-track id=text-track-model:text-track-6>text track</a> corresponding to a <code id=text-track-model:the-track-element-2><a href=#the-track-element>track</a></code> element.</p>
   <dt><dfn id=text-track-label>A label</dfn>

   <dd>
    <p>This is a human-readable string intended to identify the track for the user.</p>

    <p>The <a href=#text-track-label id=text-track-model:text-track-label>label of a track</a> can change dynamically, in the
    case of a <a href=#text-track id=text-track-model:text-track-7>text track</a> corresponding to a <code id=text-track-model:the-track-element-3><a href=#the-track-element>track</a></code> element.</p>

    <p>When a <a href=#text-track-label id=text-track-model:text-track-label-2>text track label</a> is the empty string, the user agent should automatically
    generate an appropriate label from the text track's other properties (e.g. the kind of text
    track and the text track's language) for use in its user interface. This automatically-generated
    label is not exposed in the API.</p>
   <dt><dfn id=text-track-in-band-metadata-track-dispatch-type>An in-band metadata track dispatch type</dfn>

   <dd>
    <p>This is a string extracted from the <a href=#media-resource id=text-track-model:media-resource-3>media resource</a> specifically for in-band
    metadata tracks to enable such tracks to be dispatched to different scripts in the document.</p>

    <p class=example>For example, a traditional TV station broadcast streamed on the web and
    augmented with web-specific interactive features could include text tracks with metadata for ad
    targeting, trivia game data during game shows, player states during sports games, recipe
    information during food programs, and so forth. As each program starts and ends, new tracks
    might be added or removed from the stream, and as each one is added, the user agent could bind
    them to dedicated script modules using the value of this attribute.</p>

    <p>Other than for in-band metadata text tracks, the <a href=#text-track-in-band-metadata-track-dispatch-type id=text-track-model:text-track-in-band-metadata-track-dispatch-type>in-band metadata track dispatch type</a> is the empty string. How this
    value is populated for different media formats is described in <a href=#steps-to-expose-a-media-resource-specific-text-track id=text-track-model:steps-to-expose-a-media-resource-specific-text-track>steps to expose a
    media-resource-specific text track</a>.</p>
   <dt><dfn id=text-track-language>A language</dfn>

   <dd>
    <p>This is a string (a BCP 47 language tag) representing the language of the text track's cues.
    <a href=references.html#refsBCP47>[BCP47]</a></p>

    <p>The <a href=#text-track-language id=text-track-model:text-track-language>language of a text track</a> can change dynamically,
    in the case of a <a href=#text-track id=text-track-model:text-track-8>text track</a> corresponding to a <code id=text-track-model:the-track-element-4><a href=#the-track-element>track</a></code> element.</p>
   <dt><dfn id=text-track-readiness-state>A readiness state</dfn>

   <dd>
    <p>One of the following:</p>

    <dl><dt><dfn id=text-track-not-loaded>Not loaded</dfn>

     <dd>
      <p>Indicates that the text track's cues have not been obtained.</p>
     <dt><dfn id=text-track-loading>Loading</dfn>

     <dd>
      <p>Indicates that the text track is loading and there have been no fatal errors encountered so
      far. Further cues might still be added to the track by the parser.</p>
     <dt><dfn id=text-track-loaded>Loaded</dfn>

     <dd>
      <p>Indicates that the text track has been loaded with no fatal errors.</p>
     <dt><dfn id=text-track-failed-to-load>Failed to load</dfn>

     <dd>
      <p>Indicates that the text track was enabled, but when the user agent attempted to obtain it,
      this failed in some way (e.g., <a id=text-track-model:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> could not be <a href=urls-and-fetching.html#encoding-parsing-a-url id=text-track-model:encoding-parsing-a-url>parsed</a>, network error, unknown text track format). Some or all of the cues are
      likely missing and will not be obtained.</p>
     </dl>

    <p>The <a href=#text-track-readiness-state id=text-track-model:text-track-readiness-state>readiness state</a> of a <a href=#text-track id=text-track-model:text-track-9>text
    track</a> changes dynamically as the track is obtained.</p>
   <dt><dfn id=text-track-mode>A mode</dfn>

   <dd>
    <p>One of the following:</p>

    <dl><dt><dfn id=text-track-disabled>Disabled</dfn>

     <dd>
      <p>Indicates that the text track is not active. Other than for the purposes of exposing the
      track in the DOM, the user agent is ignoring the text track. No cues are active, no events are
      fired, and the user agent will not attempt to obtain the track's cues.</p>
     <dt><dfn id=text-track-hidden>Hidden</dfn>

     <dd>
      <p>Indicates that the text track is active, but that the user agent is not actively displaying
      the cues. If no attempt has yet been made to obtain the track's cues, the user agent will
      perform such an attempt momentarily. The user agent is maintaining a list of which cues are
      active, and events are being fired accordingly.</p>
     <dt><dfn id=text-track-showing>Showing</dfn>

     <dd>
      <p>Indicates that the text track is active. If no attempt has yet been made to obtain the
      track's cues, the user agent will perform such an attempt momentarily. The user agent is
      maintaining a list of which cues are active, and events are being fired accordingly. In
      addition, for text tracks whose <a href=#text-track-kind id=text-track-model:text-track-kind-2>kind</a> is <code id=text-track-model:dom-texttrack-kind-subtitles><a href=#dom-texttrack-kind-subtitles>subtitles</a></code> or <code id=text-track-model:dom-texttrack-kind-captions><a href=#dom-texttrack-kind-captions>captions</a></code>, the cues are being overlaid on the video
      as appropriate; for text tracks whose <a href=#text-track-kind id=text-track-model:text-track-kind-3>kind</a> is <code id=text-track-model:dom-texttrack-kind-descriptions><a href=#dom-texttrack-kind-descriptions>descriptions</a></code>, the user agent is making the
      cues available to the user in a non-visual fashion; and for text tracks whose <a href=#text-track-kind id=text-track-model:text-track-kind-4>kind</a> is <code id=text-track-model:dom-texttrack-kind-chapters><a href=#dom-texttrack-kind-chapters>chapters</a></code>, the user agent is making available to
      the user a mechanism by which the user can navigate to any point in the <a href=#media-resource id=text-track-model:media-resource-4>media
      resource</a> by selecting a cue.</p>
     </dl>
   <dt><dfn id=text-track-list-of-cues>A list of zero or more cues</dfn>

   <dd>
    <p>A list of <a href=#text-track-cue id=text-track-model:text-track-cue>text track cues</a>, along with <dfn id=rules-for-updating-the-text-track-rendering>rules for
    updating the text track rendering</dfn>. For example, for WebVTT, the <a id=text-track-model:rules-for-updating-the-display-of-webvtt-text-tracks href=https://w3c.github.io/webvtt/#rules-for-updating-the-display-of-webvtt-text-tracks data-x-internal=rules-for-updating-the-display-of-webvtt-text-tracks>rules for updating
    the display of WebVTT text tracks</a>. <a href=references.html#refsWEBVTT>[WEBVTT]</a> </p>

    <p>The <a href=#text-track-list-of-cues id=text-track-model:text-track-list-of-cues>list of cues of a text track</a> can change
    dynamically, either because the <a href=#text-track id=text-track-model:text-track-10>text track</a> has <a href=#text-track-not-loaded id=text-track-model:text-track-not-loaded>not yet been loaded</a> or is still <a href=#text-track-loading id=text-track-model:text-track-loading>loading</a>,
    or due to DOM manipulation.</p>
   </dl>

  <p>Each <a href=#text-track id=text-track-model:text-track-11>text track</a> has a corresponding <code id=text-track-model:texttrack><a href=#texttrack>TextTrack</a></code> object.</p>

  <hr>

  <p>Each <a href=#media-element id=text-track-model:media-element-4>media element</a> has a <dfn id=list-of-pending-text-tracks>list of pending text tracks</dfn>, which must
  initially be empty, a <dfn id=blocked-on-parser>blocked-on-parser</dfn> flag, which must initially be false, and a
  <dfn id=did-perform-automatic-track-selection>did-perform-automatic-track-selection</dfn> flag, which must also initially be false.</p>

  <p>When the user agent is required to <dfn id=populate-the-list-of-pending-text-tracks>populate the list of pending text tracks</dfn> of a
  <a href=#media-element id=text-track-model:media-element-5>media element</a>, the user agent must add to the element's <a href=#list-of-pending-text-tracks id=text-track-model:list-of-pending-text-tracks>list of pending text
  tracks</a> each <a href=#text-track id=text-track-model:text-track-12>text track</a> in the element's <a href=#list-of-text-tracks id=text-track-model:list-of-text-tracks>list of text tracks</a> whose
  <a href=#text-track-mode id=text-track-model:text-track-mode>text track mode</a> is not <a href=#text-track-disabled id=text-track-model:text-track-disabled>disabled</a> and whose
  <a href=#text-track-readiness-state id=text-track-model:text-track-readiness-state-2>text track readiness state</a> is  <a href=#text-track-loading id=text-track-model:text-track-loading-2>loading</a>.</p>

  <p>Whenever a <code id=text-track-model:the-track-element-5><a href=#the-track-element>track</a></code> element's parent node changes, the user agent must remove the
  corresponding <a href=#text-track id=text-track-model:text-track-13>text track</a> from any <a href=#list-of-pending-text-tracks id=text-track-model:list-of-pending-text-tracks-2>list of pending text tracks</a> that it is
  in.</p>

  <p>Whenever a <a href=#text-track id=text-track-model:text-track-14>text track</a>'s <a href=#text-track-readiness-state id=text-track-model:text-track-readiness-state-3>text track readiness state</a> changes to either
  <a href=#text-track-loaded id=text-track-model:text-track-loaded>loaded</a> or <a href=#text-track-failed-to-load id=text-track-model:text-track-failed-to-load>failed to
  load</a>, the user agent must remove it from any <a href=#list-of-pending-text-tracks id=text-track-model:list-of-pending-text-tracks-3>list of pending text tracks</a> that
  it is in.</p>

  <p>When a <a href=#media-element id=text-track-model:media-element-6>media element</a> is created by an <a id=text-track-model:html-parser href=parsing.html#html-parser>HTML parser</a> or <a id=text-track-model:xml-parser href=xhtml.html#xml-parser>XML
  parser</a>, the user agent must set the element's <a href=#blocked-on-parser id=text-track-model:blocked-on-parser>blocked-on-parser</a> flag to true.
  When a <a href=#media-element id=text-track-model:media-element-7>media element</a> is popped off the <a id=text-track-model:stack-of-open-elements href=parsing.html#stack-of-open-elements>stack of open elements</a> of an
  <a id=text-track-model:html-parser-2 href=parsing.html#html-parser>HTML parser</a> or <a id=text-track-model:xml-parser-2 href=xhtml.html#xml-parser>XML parser</a>, the user agent must <a href=#honor-user-preferences-for-automatic-text-track-selection id=text-track-model:honor-user-preferences-for-automatic-text-track-selection>honor user
  preferences for automatic text track selection</a>, <a href=#populate-the-list-of-pending-text-tracks id=text-track-model:populate-the-list-of-pending-text-tracks>populate the list of pending text
  tracks</a>, and set the element's <a href=#blocked-on-parser id=text-track-model:blocked-on-parser-2>blocked-on-parser</a> flag to false.</p>

  <p>The <a href=#text-track id=text-track-model:text-track-15>text tracks</a> of a <a href=#media-element id=text-track-model:media-element-8>media element</a> are <dfn id=the-text-tracks-are-ready>ready</dfn> when both the element's <a href=#list-of-pending-text-tracks id=text-track-model:list-of-pending-text-tracks-4>list of pending text
  tracks</a> is empty and the element's <a href=#blocked-on-parser id=text-track-model:blocked-on-parser-3>blocked-on-parser</a> flag is false.</p>

  <p>Each <a href=#media-element id=text-track-model:media-element-9>media element</a> has a <dfn id=pending-text-track-change-notification-flag>pending text track change notification flag</dfn>,
  which must initially be unset.</p>

  <p>Whenever a <a href=#text-track id=text-track-model:text-track-16>text track</a> that is in a <a href=#media-element id=text-track-model:media-element-10>media element</a>'s <a href=#list-of-text-tracks id=text-track-model:list-of-text-tracks-2>list of text
  tracks</a> has its <a href=#text-track-mode id=text-track-model:text-track-mode-2>text track mode</a> change value, the user agent must run the
  following steps for the <a href=#media-element id=text-track-model:media-element-11>media element</a>:</p>

  <ol><li><p>If the <a href=#media-element id=text-track-model:media-element-12>media element</a>'s <a href=#pending-text-track-change-notification-flag id=text-track-model:pending-text-track-change-notification-flag>pending text track change notification
   flag</a> is set, return.<li><p>Set the <a href=#media-element id=text-track-model:media-element-13>media element</a>'s <a href=#pending-text-track-change-notification-flag id=text-track-model:pending-text-track-change-notification-flag-2>pending text track change notification
   flag</a>.<li>
    <p><a href=#queue-a-media-element-task id=text-track-model:queue-a-media-element-task>Queue a media element task</a> given the <a href=#media-element id=text-track-model:media-element-14>media element</a> to run these
    steps:</p>

    <ol><li><p>Unset the <a href=#media-element id=text-track-model:media-element-15>media element</a>'s <a href=#pending-text-track-change-notification-flag id=text-track-model:pending-text-track-change-notification-flag-3>pending text track change notification
     flag</a>.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=text-track-model:concept-event-fire data-x-internal=concept-event-fire>Fire an event</a> named <code id=text-track-model:event-media-change><a href=#event-media-change>change</a></code> at the <a href=#media-element id=text-track-model:media-element-16>media element</a>'s <code id=text-track-model:dom-media-texttracks><a href=#dom-media-texttracks>textTracks</a></code> attribute's <code id=text-track-model:texttracklist><a href=#texttracklist>TextTrackList</a></code>
     object.</ol>
   <li><p>If the <a href=#media-element id=text-track-model:media-element-17>media element</a>'s <a href=#show-poster-flag id=text-track-model:show-poster-flag>show poster flag</a> is not set, run the
   <i id=text-track-model:time-marches-on><a href=#time-marches-on>time marches on</a></i> steps.</ol>

  <p>The <a id=text-track-model:task-source href=webappapis.html#task-source>task source</a> for the <a href=webappapis.html#concept-task id=text-track-model:concept-task>tasks</a> listed in this
  section is the <a id=text-track-model:dom-manipulation-task-source href=webappapis.html#dom-manipulation-task-source>DOM manipulation task source</a>.</p>

  <hr>

  <p>A <dfn id=text-track-cue>text track cue</dfn> is the unit of time-sensitive data in a <a href=#text-track id=text-track-model:text-track-17>text track</a>,
  corresponding for instance for subtitles and captions to the text that appears at a particular
  time and disappears at another time.</p>

  <p>Each <a href=#text-track-cue id=text-track-model:text-track-cue-2>text track cue</a> consists of:</p>

  <dl><dt><dfn id=text-track-cue-identifier>An identifier</dfn>
   <dd>
    <p>An arbitrary string.</p>
   <dt><dfn id=text-track-cue-start-time>A start time</dfn>
   <dd>
    <p>The time, in seconds and fractions of a second, that describes the beginning of the range of
    the <a href=#media-data id=text-track-model:media-data>media data</a> to which the cue applies.</p>
   <dt><dfn id=text-track-cue-end-time>An end time</dfn>
   <dd>
    <p>The time, in seconds and fractions of a second, that describes the end of the range of the
    <a href=#media-data id=text-track-model:media-data-2>media data</a> to which the cue applies, or positive Infinity for an <a href=#unbounded-text-track-cue id=text-track-model:unbounded-text-track-cue>unbounded
    text track cue</a>.</p>
   <dt><dfn id=text-track-cue-pause-on-exit-flag>A pause-on-exit flag</dfn>
   <dd>
    <p>A boolean indicating whether playback of the <a href=#media-resource id=text-track-model:media-resource-5>media resource</a> is to pause when the
    end of the range to which the cue applies is reached.</p>
   <dt>Some additional format-specific data<dd>
    <p>Additional fields, as needed for the format, including the actual data of the cue. For
    example, WebVTT has a <a id=text-track-model:text-track-cue-writing-direction href=https://w3c.github.io/webvtt/#webvtt-cue-writing-direction data-x-internal=text-track-cue-writing-direction>text track cue writing direction</a> and so forth.
    <a href=references.html#refsWEBVTT>[WEBVTT]</a></p>
   </dl>

  <p>An <dfn id=unbounded-text-track-cue>unbounded text track cue</dfn> is a text track cue
  with a <a href=#text-track-cue-end-time id=text-track-model:text-track-cue-end-time>text track cue end time</a> set to positive Infinity. An active <a href=#unbounded-text-track-cue id=text-track-model:unbounded-text-track-cue-2>unbounded
  text track cue</a> cannot become inactive through the usual monotonic increase of the
  <a href=#current-playback-position id=text-track-model:current-playback-position>current playback position</a> during normal playback (e.g. a metadata cue for a chapter in a live
  event with no announced end time.)</p>

  <p class=note>The <a href=#text-track-cue-start-time id=text-track-model:text-track-cue-start-time>text track cue start time</a> and <a href=#text-track-cue-end-time id=text-track-model:text-track-cue-end-time-2>text track cue end
  time</a> can be negative. (The <a href=#current-playback-position id=text-track-model:current-playback-position-2>current playback position</a> can never be negative,
  though, so cues entirely before time zero cannot be active.)</p>

  <p>Each <a href=#text-track-cue id=text-track-model:text-track-cue-3>text track cue</a> has a corresponding <code id=text-track-model:texttrackcue><a href=#texttrackcue>TextTrackCue</a></code> object (or more
  specifically, an object that inherits from <code id=text-track-model:texttrackcue-2><a href=#texttrackcue>TextTrackCue</a></code> — for example, WebVTT
  cues use the <code id=text-track-model:vttcue><a data-x-internal=vttcue href=https://w3c.github.io/webvtt/#vttcue>VTTCue</a></code> interface). A <a href=#text-track-cue id=text-track-model:text-track-cue-4>text track cue</a>'s in-memory
  representation can be dynamically changed through this <code id=text-track-model:texttrackcue-3><a href=#texttrackcue>TextTrackCue</a></code> API.
  <a href=references.html#refsWEBVTT>[WEBVTT]</a></p>

  <p>A <a href=#text-track-cue id=text-track-model:text-track-cue-5>text track cue</a> is associated with <a href=#rules-for-updating-the-text-track-rendering id=text-track-model:rules-for-updating-the-text-track-rendering>rules for updating the text track
  rendering</a>, as defined by the specification for the specific kind of <a href=#text-track-cue id=text-track-model:text-track-cue-6>text track
  cue</a>. These rules are used specifically when the object representing the cue is added to a
  <code id=text-track-model:texttrack-2><a href=#texttrack>TextTrack</a></code> object using the <code id=text-track-model:dom-texttrack-addcue><a href=#dom-texttrack-addcue>addCue()</a></code>
  method.</p>

  <p>In addition, each <a href=#text-track-cue id=text-track-model:text-track-cue-7>text track cue</a> has two pieces of dynamic information:</p>

  <dl><dt>The <dfn id=text-track-cue-active-flag>active flag</dfn>
   <dd>
    <p>This flag must be initially unset. The flag is used to ensure events are fired appropriately
    when the cue becomes active or inactive, and to make sure the right cues are rendered.</p>

    <p>The user agent must synchronously unset this flag whenever the <a href=#text-track-cue id=text-track-model:text-track-cue-8>text track cue</a> is
    removed from its <a href=#text-track id=text-track-model:text-track-18>text track</a>'s <a href=#text-track-list-of-cues id=text-track-model:text-track-list-of-cues-2>text track list of cues</a>; whenever the
    <a href=#text-track id=text-track-model:text-track-19>text track</a> itself is removed from its <a href=#media-element id=text-track-model:media-element-18>media element</a>'s <a href=#list-of-text-tracks id=text-track-model:list-of-text-tracks-3>list of
    text tracks</a> or has its <a href=#text-track-mode id=text-track-model:text-track-mode-3>text track mode</a> changed to <a href=#text-track-disabled id=text-track-model:text-track-disabled-2>disabled</a>; and whenever the <a href=#media-element id=text-track-model:media-element-19>media element</a>'s <code id=text-track-model:dom-media-readystate><a href=#dom-media-readystate>readyState</a></code> is changed back to <code id=text-track-model:dom-media-have_nothing><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>. When the flag is unset in this way for one
    or more cues in <a href=#text-track id=text-track-model:text-track-20>text tracks</a> that were <a href=#text-track-showing id=text-track-model:text-track-showing>showing</a> prior to the relevant incident, the user agent must, after having unset
    the flag for all the affected cues, apply the <a href=#rules-for-updating-the-text-track-rendering id=text-track-model:rules-for-updating-the-text-track-rendering-2>rules for updating the text track
    rendering</a> of those <a href=#text-track id=text-track-model:text-track-21>text tracks</a>. For example, for <a href=#text-track id=text-track-model:text-track-22>text tracks</a> based on WebVTT, the <a id=text-track-model:rules-for-updating-the-display-of-webvtt-text-tracks-2 href=https://w3c.github.io/webvtt/#rules-for-updating-the-display-of-webvtt-text-tracks data-x-internal=rules-for-updating-the-display-of-webvtt-text-tracks>rules for updating the display
    of WebVTT text tracks</a>. <a href=references.html#refsWEBVTT>[WEBVTT]</a></p> <dt>The <dfn id=text-track-cue-display-state>display state</dfn>
   <dd>
    <p>This is used as part of the rendering model, to keep cues in a consistent position. It must
    initially be empty. Whenever the <a href=#text-track-cue-active-flag id=text-track-model:text-track-cue-active-flag>text track cue active flag</a> is unset, the user
    agent must empty the <a href=#text-track-cue-display-state id=text-track-model:text-track-cue-display-state>text track cue display state</a>.</p>
   </dl>

  <p>The <a href=#text-track-cue id=text-track-model:text-track-cue-9>text track cues</a> of a <a href=#media-element id=text-track-model:media-element-20>media element</a>'s
  <a href=#text-track id=text-track-model:text-track-23>text tracks</a> are ordered relative to each other in the <dfn id=text-track-cue-order>text
  track cue order</dfn>, which is determined as follows: first group the <a href=#text-track-cue id=text-track-model:text-track-cue-10>cues</a> by their <a href=#text-track id=text-track-model:text-track-24>text track</a>, with the groups being sorted in the same order
  as their <a href=#text-track id=text-track-model:text-track-25>text tracks</a> appear in the <a href=#media-element id=text-track-model:media-element-21>media element</a>'s
  <a href=#list-of-text-tracks id=text-track-model:list-of-text-tracks-4>list of text tracks</a>; then, within each group, <a href=#text-track-cue id=text-track-model:text-track-cue-11>cues</a> must be sorted by their <a href=#text-track-cue-start-time id=text-track-model:text-track-cue-start-time-2>start
  time</a>, earliest first; then, any <a href=#text-track-cue id=text-track-model:text-track-cue-12>cues</a> with the same
  <a href=#text-track-cue-start-time id=text-track-model:text-track-cue-start-time-3>start time</a> must be sorted by their <a href=#text-track-cue-end-time id=text-track-model:text-track-cue-end-time-3>end time</a>, latest first; and finally, any <a href=#text-track-cue id=text-track-model:text-track-cue-13>cues</a> with identical <a href=#text-track-cue-end-time id=text-track-model:text-track-cue-end-time-4>end
  times</a> must be sorted in the order they were last added to their respective <a href=#text-track-list-of-cues id=text-track-model:text-track-list-of-cues-3>text track
  list of cues</a>, oldest first (so e.g. for cues from a WebVTT file, that would initially be
  the order in which the cues were listed in the file). <a href=references.html#refsWEBVTT>[WEBVTT]</a></p>


  <h6 id=sourcing-in-band-text-tracks><span class=secno>4.8.11.11.2</span> Sourcing in-band text tracks<a href=#sourcing-in-band-text-tracks class=self-link></a></h6>

  <p>A <dfn id=media-resource-specific-text-track>media-resource-specific text track</dfn> is a <a href=#text-track id=sourcing-in-band-text-tracks:text-track>text track</a> that corresponds
  to data found in the <a href=#media-resource id=sourcing-in-band-text-tracks:media-resource>media resource</a>.</p>


  

  <p>Rules for processing and rendering such data are defined by the relevant specifications, e.g.
  the specification of the video format if the <a href=#media-resource id=sourcing-in-band-text-tracks:media-resource-2>media resource</a> is a video. Details for
  some legacy formats can be found in <cite>Sourcing In-band Media Resource Tracks from Media
  Containers into HTML</cite>. <a href=references.html#refsINBAND>[INBAND]</a></p>

  <p>When a <a href=#media-resource id=sourcing-in-band-text-tracks:media-resource-3>media resource</a> contains data that the user agent recognizes and supports as
  being equivalent to a <a href=#text-track id=sourcing-in-band-text-tracks:text-track-2>text track</a>, the user agent <a href=#found-a-media-resource-specific-timed-track>runs</a> the <dfn id=steps-to-expose-a-media-resource-specific-text-track>steps to expose a
  media-resource-specific text track</dfn> with the relevant data, as follows.</p>

  

  <ol><li><p>Associate the relevant data with a new <a href=#text-track id=sourcing-in-band-text-tracks:text-track-3>text track</a> and its corresponding new
   <code id=sourcing-in-band-text-tracks:texttrack><a href=#texttrack>TextTrack</a></code> object. The <a href=#text-track id=sourcing-in-band-text-tracks:text-track-4>text track</a> is a <a href=#media-resource-specific-text-track id=sourcing-in-band-text-tracks:media-resource-specific-text-track>media-resource-specific
   text track</a>.<li><p>Set the new <a href=#text-track id=sourcing-in-band-text-tracks:text-track-5>text track</a>'s <a href=#text-track-kind id=sourcing-in-band-text-tracks:text-track-kind>kind</a>, <a href=#text-track-label id=sourcing-in-band-text-tracks:text-track-label>label</a>, and <a href=#text-track-language id=sourcing-in-band-text-tracks:text-track-language>language</a>
   based on the semantics of the relevant data, as defined by the relevant specification. If there
   is no label in that data, then the <a href=#text-track-label id=sourcing-in-band-text-tracks:text-track-label-2>label</a> must be set to the
   empty string.<li><p>Associate the <a href=#text-track-list-of-cues id=sourcing-in-band-text-tracks:text-track-list-of-cues>text track list of cues</a> with the <a href=#rules-for-updating-the-text-track-rendering id=sourcing-in-band-text-tracks:rules-for-updating-the-text-track-rendering>rules for updating the
   text track rendering</a> appropriate for the format in question.</p>

   <li>
    <p>If the new <a href=#text-track id=sourcing-in-band-text-tracks:text-track-6>text track</a>'s <a href=#text-track-kind id=sourcing-in-band-text-tracks:text-track-kind-2>kind</a> is <code id=sourcing-in-band-text-tracks:dom-texttrack-kind-chapters><a href=#dom-texttrack-kind-chapters>chapters</a></code> or <code id=sourcing-in-band-text-tracks:dom-texttrack-kind-metadata><a href=#dom-texttrack-kind-metadata>metadata</a></code>, then set the <a href=#text-track-in-band-metadata-track-dispatch-type id=sourcing-in-band-text-tracks:text-track-in-band-metadata-track-dispatch-type>text track in-band
    metadata track dispatch type</a> as follows, based on the type of the <a href=#media-resource id=sourcing-in-band-text-tracks:media-resource-4>media
    resource</a>:</p>

    <dl class=switch><dt>If the <a href=#media-resource id=sourcing-in-band-text-tracks:media-resource-5>media resource</a> is an Ogg file<dd>The <a href=#text-track-in-band-metadata-track-dispatch-type id=sourcing-in-band-text-tracks:text-track-in-band-metadata-track-dispatch-type-2>text track in-band metadata track dispatch type</a> must be set to the value
     of the Name header field. <a href=references.html#refsOGGSKELETONHEADERS>[OGGSKELETONHEADERS]</a><dt>If the <a href=#media-resource id=sourcing-in-band-text-tracks:media-resource-6>media resource</a> is a WebM file<dd>The <a href=#text-track-in-band-metadata-track-dispatch-type id=sourcing-in-band-text-tracks:text-track-in-band-metadata-track-dispatch-type-3>text track in-band metadata track dispatch type</a> must be set to the value
     of the <code>CodecID</code> element. <a href=references.html#refsWEBMCG>[WEBMCG]</a><dt>If the <a href=#media-resource id=sourcing-in-band-text-tracks:media-resource-7>media resource</a> is an MPEG-2 file<dd>Let <var>stream type</var> be the value of the "stream_type" field describing the text
     track's type in the file's program map section, interpreted as an 8-bit unsigned integer. Let
     <var>length</var> be the value of the "ES_info_length" field for the track in the same part of
     the program map section, interpreted as an integer as defined by <cite>Generic coding of moving
     pictures and associated audio information</cite>. Let <var>descriptor bytes</var> be the
     <var>length</var> bytes following the "ES_info_length" field. The <a href=#text-track-in-band-metadata-track-dispatch-type id=sourcing-in-band-text-tracks:text-track-in-band-metadata-track-dispatch-type-4>text track in-band
     metadata track dispatch type</a> must be set to the concatenation of the <var>stream
     type</var> byte and the zero or more <var>descriptor bytes</var> bytes, expressed in
     hexadecimal using <a href=https://infra.spec.whatwg.org/#ascii-upper-hex-digit id=sourcing-in-band-text-tracks:uppercase-ascii-hex-digits data-x-internal=uppercase-ascii-hex-digits>ASCII upper hex digits</a>.
     <a href=references.html#refsMPEG2>[MPEG2]</a>
     <dt>If the <a href=#media-resource id=sourcing-in-band-text-tracks:media-resource-8>media resource</a> is an MPEG-4 file<dd>Let <var>stsd box</var> be the
     first <code>stsd</code> box of the
     first <code>stbl</code> box of the
     first <code>minf</code> box of the
     first <code>mdia</code> box of the
     <a href=#text-track id=sourcing-in-band-text-tracks:text-track-7>text track</a>'s <code>trak</code> box in the
     first <code>moov</code> box
     of the file, or null if no such <code>stsd</code> box exists.

     If <var>stsd box</var> is null, or if <var>stsd box</var> has neither a <code>mett</code> box nor a <code>metx</code> box, then the <a href=#text-track-in-band-metadata-track-dispatch-type id=sourcing-in-band-text-tracks:text-track-in-band-metadata-track-dispatch-type-5>text track
     in-band metadata track dispatch type</a> must be set to the empty string.

     Otherwise, if <var>stsd box</var> has a <code>mett</code> box, then the <a href=#text-track-in-band-metadata-track-dispatch-type id=sourcing-in-band-text-tracks:text-track-in-band-metadata-track-dispatch-type-6>text
     track in-band metadata track dispatch type</a> must be set to either the concatenation of the
     string "<code>mett</code>", a U+0020 SPACE character, and the value of the first <code>mime_format</code> field of the first <code>mett</code> box of <var>stsd
     box</var>, or the empty string if that field is absent in that box.

     Otherwise, if <var>stsd box</var> has no <code>mett</code> box but has a <code>metx</code> box, then the <a href=#text-track-in-band-metadata-track-dispatch-type id=sourcing-in-band-text-tracks:text-track-in-band-metadata-track-dispatch-type-7>text track in-band metadata track dispatch type</a>
     must be set to either the concatenation of the string "<code>metx</code>", a U+0020 SPACE
     character, and the value of the first <code>namespace</code> field of the first <code>metx</code> box of <var>stsd box</var>, or the empty string if that field is absent in
     that box.

     <a href=references.html#refsMPEG4>[MPEG4]</a>
     </dl>
   <li><p>Populate the new <a href=#text-track id=sourcing-in-band-text-tracks:text-track-8>text track</a>'s <a href=#text-track-list-of-cues id=sourcing-in-band-text-tracks:text-track-list-of-cues-2>list of
   cues</a> with the cues parsed so far, following the <a href=#guidelines-for-exposing-cues-in-various-formats-as-text-track-cues id=sourcing-in-band-text-tracks:guidelines-for-exposing-cues-in-various-formats-as-text-track-cues>guidelines for exposing
   cues</a>, and begin updating it dynamically as necessary.<li><p>Set the new <a href=#text-track id=sourcing-in-band-text-tracks:text-track-9>text track</a>'s <a href=#text-track-readiness-state id=sourcing-in-band-text-tracks:text-track-readiness-state>readiness
   state</a> to <a href=#text-track-loaded id=sourcing-in-band-text-tracks:text-track-loaded>loaded</a>.<li><p>Set the new <a href=#text-track id=sourcing-in-band-text-tracks:text-track-10>text track</a>'s <a href=#text-track-mode id=sourcing-in-band-text-tracks:text-track-mode>mode</a> to the
   mode consistent with the user's preferences and the requirements of the relevant specification
   for the data.</p>

    <p class=note>For instance, if there are no other active subtitles, and this is a forced
    subtitle track (a subtitle track giving subtitles in the audio track's primary language, but
    only for audio that is actually in another language), then those subtitles might be activated
    here.</p>
   <li><p>Add the new <a href=#text-track id=sourcing-in-band-text-tracks:text-track-11>text track</a> to the <a href=#media-element id=sourcing-in-band-text-tracks:media-element>media element</a>'s <a href=#list-of-text-tracks id=sourcing-in-band-text-tracks:list-of-text-tracks>list of text
   tracks</a>.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=sourcing-in-band-text-tracks:concept-event-fire data-x-internal=concept-event-fire>Fire an event</a> named <code id=sourcing-in-band-text-tracks:event-media-addtrack><a href=#event-media-addtrack>addtrack</a></code> at the <a href=#media-element id=sourcing-in-band-text-tracks:media-element-2>media element</a>'s <code id=sourcing-in-band-text-tracks:dom-media-texttracks><a href=#dom-media-texttracks>textTracks</a></code> attribute's <code id=sourcing-in-band-text-tracks:texttracklist><a href=#texttracklist>TextTrackList</a></code> object,
   using <code id=sourcing-in-band-text-tracks:trackevent><a href=#trackevent>TrackEvent</a></code>, with the <code id=sourcing-in-band-text-tracks:dom-trackevent-track><a href=#dom-trackevent-track>track</a></code>
   attribute initialized to the <a href=#text-track id=sourcing-in-band-text-tracks:text-track-12>text track</a>'s <code id=sourcing-in-band-text-tracks:texttrack-2><a href=#texttrack>TextTrack</a></code> object.</ol>

  

  

  



  

  <h6 id=sourcing-out-of-band-text-tracks><span class=secno>4.8.11.11.3</span> Sourcing out-of-band text tracks<a href=#sourcing-out-of-band-text-tracks class=self-link></a></h6>

  <p>When a <code id=sourcing-out-of-band-text-tracks:the-track-element><a href=#the-track-element>track</a></code> element is created, it must be associated with a new <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track>text
  track</a> (with its value set as defined below) and its corresponding new
  <code id=sourcing-out-of-band-text-tracks:texttrack><a href=#texttrack>TextTrack</a></code> object.</p>

  <p>The <a href=#text-track-kind id=sourcing-out-of-band-text-tracks:text-track-kind>text track kind</a> is determined from the state of the element's <code id=sourcing-out-of-band-text-tracks:attr-track-kind><a href=#attr-track-kind>kind</a></code> attribute according to the following table; for a state given
  in a cell of the first column, the <a href=#text-track-kind id=sourcing-out-of-band-text-tracks:text-track-kind-2>kind</a> is the string given
  in the second column:</p>

  <table><thead><tr><th>State
     <th>String
   <tbody><tr><td><a href=#attr-track-kind-subtitles id=sourcing-out-of-band-text-tracks:attr-track-kind-subtitles>Subtitles</a>
     <td><code id=sourcing-out-of-band-text-tracks:dom-texttrack-kind-subtitles><a href=#dom-texttrack-kind-subtitles>subtitles</a></code>
    <tr><td><a href=#attr-track-kind-captions id=sourcing-out-of-band-text-tracks:attr-track-kind-captions>Captions</a>
     <td><code id=sourcing-out-of-band-text-tracks:dom-texttrack-kind-captions><a href=#dom-texttrack-kind-captions>captions</a></code>
    <tr><td><a href=#attr-track-kind-descriptions id=sourcing-out-of-band-text-tracks:attr-track-kind-descriptions>Descriptions</a>
     <td><code id=sourcing-out-of-band-text-tracks:dom-texttrack-kind-descriptions><a href=#dom-texttrack-kind-descriptions>descriptions</a></code>
    <tr><td><a href=#attr-track-kind-chapters id=sourcing-out-of-band-text-tracks:attr-track-kind-chapters>Chapters metadata</a>
     <td><code id=sourcing-out-of-band-text-tracks:dom-texttrack-kind-chapters><a href=#dom-texttrack-kind-chapters>chapters</a></code>
    <tr><td><a href=#attr-track-kind-metadata id=sourcing-out-of-band-text-tracks:attr-track-kind-metadata>Metadata</a>
     <td><code id=sourcing-out-of-band-text-tracks:dom-texttrack-kind-metadata><a href=#dom-texttrack-kind-metadata>metadata</a></code>
  </table>

  <p>The <a href=#text-track-label id=sourcing-out-of-band-text-tracks:text-track-label>text track label</a> is the element's <a href=#track-label id=sourcing-out-of-band-text-tracks:track-label>track label</a>.</p>

  <p>The <a href=#text-track-language id=sourcing-out-of-band-text-tracks:text-track-language>text track language</a> is the element's <a href=#track-language id=sourcing-out-of-band-text-tracks:track-language>track language</a>, if any, or
  the empty string otherwise.</p>

  <p>As the <code id=sourcing-out-of-band-text-tracks:attr-track-kind-2><a href=#attr-track-kind>kind</a></code>, <code id=sourcing-out-of-band-text-tracks:attr-track-label><a href=#attr-track-label>label</a></code>,
  and <code id=sourcing-out-of-band-text-tracks:attr-track-srclang><a href=#attr-track-srclang>srclang</a></code> attributes are set, changed, or removed, the
  <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-2>text track</a> must update accordingly, as per the definitions above.</p>

  <p class=note>Changes to the <a href=#track-url id=sourcing-out-of-band-text-tracks:track-url>track URL</a> are handled in the algorithm below.</p>

  <p>The <a href=#text-track-readiness-state id=sourcing-out-of-band-text-tracks:text-track-readiness-state>text track readiness state</a> is initially <a href=#text-track-not-loaded id=sourcing-out-of-band-text-tracks:text-track-not-loaded>not loaded</a>, and the <a href=#text-track-mode id=sourcing-out-of-band-text-tracks:text-track-mode>text track mode</a> is initially <a href=#text-track-disabled id=sourcing-out-of-band-text-tracks:text-track-disabled>disabled</a>.</p>

  <p>The <a href=#text-track-list-of-cues id=sourcing-out-of-band-text-tracks:text-track-list-of-cues>text track list of cues</a> is initially empty. It is dynamically modified when
  the referenced file is parsed. Associated with the list are the <a href=#rules-for-updating-the-text-track-rendering id=sourcing-out-of-band-text-tracks:rules-for-updating-the-text-track-rendering>rules for updating the text
  track rendering</a> appropriate for the format in question; for WebVTT, this is the <a id=sourcing-out-of-band-text-tracks:rules-for-updating-the-display-of-webvtt-text-tracks href=https://w3c.github.io/webvtt/#rules-for-updating-the-display-of-webvtt-text-tracks data-x-internal=rules-for-updating-the-display-of-webvtt-text-tracks>rules
  for updating the display of WebVTT text tracks</a>. <a href=references.html#refsWEBVTT>[WEBVTT]</a></p>

  <p>When a <code id=sourcing-out-of-band-text-tracks:the-track-element-2><a href=#the-track-element>track</a></code> element's parent element changes and the new parent is a <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element>media
  element</a>, then the user agent must add the <code id=sourcing-out-of-band-text-tracks:the-track-element-3><a href=#the-track-element>track</a></code> element's corresponding
  <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-3>text track</a> to the <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-2>media element</a>'s <a href=#list-of-text-tracks id=sourcing-out-of-band-text-tracks:list-of-text-tracks>list of text tracks</a>, and
  then <a href=#queue-a-media-element-task id=sourcing-out-of-band-text-tracks:queue-a-media-element-task>queue a media element task</a> given the <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-3>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=sourcing-out-of-band-text-tracks:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=sourcing-out-of-band-text-tracks:event-media-addtrack><a href=#event-media-addtrack>addtrack</a></code> at the <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-4>media element</a>'s <code id=sourcing-out-of-band-text-tracks:dom-media-texttracks><a href=#dom-media-texttracks>textTracks</a></code> attribute's <code id=sourcing-out-of-band-text-tracks:texttracklist><a href=#texttracklist>TextTrackList</a></code> object,
  using <code id=sourcing-out-of-band-text-tracks:trackevent><a href=#trackevent>TrackEvent</a></code>, with the <code id=sourcing-out-of-band-text-tracks:dom-trackevent-track><a href=#dom-trackevent-track>track</a></code> attribute
  initialized to the <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-4>text track</a>'s <code id=sourcing-out-of-band-text-tracks:texttrack-2><a href=#texttrack>TextTrack</a></code> object.</p>

  <p>When a <code id=sourcing-out-of-band-text-tracks:the-track-element-4><a href=#the-track-element>track</a></code> element's parent element changes and the old parent was a <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-5>media
  element</a>, then the user agent must remove the <code id=sourcing-out-of-band-text-tracks:the-track-element-5><a href=#the-track-element>track</a></code> element's corresponding
  <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-5>text track</a> from the <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-6>media element</a>'s <a href=#list-of-text-tracks id=sourcing-out-of-band-text-tracks:list-of-text-tracks-2>list of text tracks</a>,
  and then <a href=#queue-a-media-element-task id=sourcing-out-of-band-text-tracks:queue-a-media-element-task-2>queue a media element task</a> given the <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-7>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=sourcing-out-of-band-text-tracks:concept-event-fire-2 data-x-internal=concept-event-fire>fire an event</a> named <code id=sourcing-out-of-band-text-tracks:event-media-removetrack><a href=#event-media-removetrack>removetrack</a></code> at the <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-8>media element</a>'s <code id=sourcing-out-of-band-text-tracks:dom-media-texttracks-2><a href=#dom-media-texttracks>textTracks</a></code> attribute's <code id=sourcing-out-of-band-text-tracks:texttracklist-2><a href=#texttracklist>TextTrackList</a></code> object,
  using <code id=sourcing-out-of-band-text-tracks:trackevent-2><a href=#trackevent>TrackEvent</a></code>, with the <code id=sourcing-out-of-band-text-tracks:dom-trackevent-track-2><a href=#dom-trackevent-track>track</a></code> attribute
  initialized to the <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-6>text track</a>'s <code id=sourcing-out-of-band-text-tracks:texttrack-3><a href=#texttrack>TextTrack</a></code> object.</p>
  

  <hr>

  <p>When a <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-7>text track</a> corresponding to a <code id=sourcing-out-of-band-text-tracks:the-track-element-6><a href=#the-track-element>track</a></code> element is added to a
  <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-9>media element</a>'s <a href=#list-of-text-tracks id=sourcing-out-of-band-text-tracks:list-of-text-tracks-3>list of text tracks</a>, the user agent must <a href=#queue-a-media-element-task id=sourcing-out-of-band-text-tracks:queue-a-media-element-task-3>queue a
  media element task</a> given the <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-10>media element</a> to run the following steps for the
  <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-11>media element</a>:</p>

  <ol><li><p>If the element's <a href=#blocked-on-parser id=sourcing-out-of-band-text-tracks:blocked-on-parser>blocked-on-parser</a> flag is true, then return.<li><p>If the element's <a href=#did-perform-automatic-track-selection id=sourcing-out-of-band-text-tracks:did-perform-automatic-track-selection>did-perform-automatic-track-selection</a> flag is true, then
   return.<li><p><a href=#honor-user-preferences-for-automatic-text-track-selection id=sourcing-out-of-band-text-tracks:honor-user-preferences-for-automatic-text-track-selection>Honor user preferences for automatic text track selection</a> for this
   element.</ol>

  <p>When the user agent is required to <dfn id=honor-user-preferences-for-automatic-text-track-selection>honor user preferences for automatic text track
  selection</dfn> for a <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-12>media element</a>, the user agent must run the following steps:</p>

  <ol><li><p><a href=#perform-automatic-text-track-selection id=sourcing-out-of-band-text-tracks:perform-automatic-text-track-selection>Perform automatic text track selection</a> for <code id=sourcing-out-of-band-text-tracks:dom-texttrack-kind-subtitles-2><a href=#dom-texttrack-kind-subtitles>subtitles</a></code> and <code id=sourcing-out-of-band-text-tracks:dom-texttrack-kind-captions-2><a href=#dom-texttrack-kind-captions>captions</a></code>.<li><p><a href=#perform-automatic-text-track-selection id=sourcing-out-of-band-text-tracks:perform-automatic-text-track-selection-2>Perform automatic text track selection</a> for <code id=sourcing-out-of-band-text-tracks:dom-texttrack-kind-descriptions-2><a href=#dom-texttrack-kind-descriptions>descriptions</a></code>.<li><p>If there are any <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-8>text tracks</a> in the <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-13>media
   element</a>'s <a href=#list-of-text-tracks id=sourcing-out-of-band-text-tracks:list-of-text-tracks-4>list of text tracks</a> whose <a href=#text-track-kind id=sourcing-out-of-band-text-tracks:text-track-kind-3>text track kind</a> is <code id=sourcing-out-of-band-text-tracks:dom-texttrack-kind-metadata-2><a href=#dom-texttrack-kind-metadata>chapters</a></code> or <code id=sourcing-out-of-band-text-tracks:dom-texttrack-kind-metadata-3><a href=#dom-texttrack-kind-metadata>metadata</a></code> that correspond to <code id=sourcing-out-of-band-text-tracks:the-track-element-7><a href=#the-track-element>track</a></code>
   elements with a <code id=sourcing-out-of-band-text-tracks:attr-track-default><a href=#attr-track-default>default</a></code> attribute set whose <a href=#text-track-mode id=sourcing-out-of-band-text-tracks:text-track-mode-2>text
   track mode</a> is set to <a href=#text-track-disabled id=sourcing-out-of-band-text-tracks:text-track-disabled-2>disabled</a>, then set the
   <a href=#text-track-mode id=sourcing-out-of-band-text-tracks:text-track-mode-3>text track mode</a> of all such tracks to <a href=#text-track-hidden id=sourcing-out-of-band-text-tracks:text-track-hidden>hidden</a>.<li><p>Set the element's <a href=#did-perform-automatic-track-selection id=sourcing-out-of-band-text-tracks:did-perform-automatic-track-selection-2>did-perform-automatic-track-selection</a> flag to
   true.</ol>

  <p>When the steps above say to <dfn id=perform-automatic-text-track-selection>perform automatic text track selection</dfn> for one or more
  <a href=#text-track-kind id=sourcing-out-of-band-text-tracks:text-track-kind-4>text track kinds</a>, it means to run the following steps:</p>

  <ol><li><p>Let <var>candidates</var> be a list consisting of the <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-9>text tracks</a> in the <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-14>media element</a>'s <a href=#list-of-text-tracks id=sourcing-out-of-band-text-tracks:list-of-text-tracks-5>list of text tracks</a>
   whose <a href=#text-track-kind id=sourcing-out-of-band-text-tracks:text-track-kind-5>text track kind</a> is one of the kinds that were passed to the algorithm, if any,
   in the order given in the <a href=#list-of-text-tracks id=sourcing-out-of-band-text-tracks:list-of-text-tracks-6>list of text tracks</a>.<li><p>If <var>candidates</var> is empty, then return.<li><p>If any of the <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-10>text tracks</a> in <var>candidates</var> have a <a href=#text-track-mode id=sourcing-out-of-band-text-tracks:text-track-mode-4>text track mode</a> set to <a href=#text-track-showing id=sourcing-out-of-band-text-tracks:text-track-showing>showing</a>, return.<li>
    <p>If the user has expressed an interest in having a track from <var>candidates</var>
    enabled based on its <a href=#text-track-kind id=sourcing-out-of-band-text-tracks:text-track-kind-6>text track kind</a>, <a href=#text-track-language id=sourcing-out-of-band-text-tracks:text-track-language-2>text track language</a>, and
    <a href=#text-track-label id=sourcing-out-of-band-text-tracks:text-track-label-2>text track label</a>, then set its <a href=#text-track-mode id=sourcing-out-of-band-text-tracks:text-track-mode-5>text track mode</a> to <a href=#text-track-showing id=sourcing-out-of-band-text-tracks:text-track-showing-2>showing</a>.</p> 

    <p class=note>For example, the user could have set a browser preference to the effect of "I
    want French captions whenever possible", or "If there is a subtitle track with 'Commentary' in
    the title, enable it", or "If there are audio description tracks available, enable one, ideally
    in Swiss German, but failing that in Standard Swiss German or Standard German".</p>

    <p>Otherwise, if there are any <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-11>text tracks</a> in <var>candidates</var> that correspond to <code id=sourcing-out-of-band-text-tracks:the-track-element-8><a href=#the-track-element>track</a></code> elements with a <code id=sourcing-out-of-band-text-tracks:attr-track-default-2><a href=#attr-track-default>default</a></code> attribute set whose <a href=#text-track-mode id=sourcing-out-of-band-text-tracks:text-track-mode-6>text track mode</a> is
    set to <a href=#text-track-disabled id=sourcing-out-of-band-text-tracks:text-track-disabled-3>disabled</a>, then set the <a href=#text-track-mode id=sourcing-out-of-band-text-tracks:text-track-mode-7>text track
    mode</a> of the first such track to <a href=#text-track-showing id=sourcing-out-of-band-text-tracks:text-track-showing-3>showing</a>.</p>
   </ol>

  <p>When a <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-12>text track</a> corresponding to a <code id=sourcing-out-of-band-text-tracks:the-track-element-9><a href=#the-track-element>track</a></code> element experiences any of
  the following circumstances, the user agent must <a href=#start-the-track-processing-model id=sourcing-out-of-band-text-tracks:start-the-track-processing-model>start the <code>track</code> processing
  model</a> for that <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-13>text track</a> and its <code id=sourcing-out-of-band-text-tracks:the-track-element-10><a href=#the-track-element>track</a></code> element:

  <ul><li>The <code id=sourcing-out-of-band-text-tracks:the-track-element-11><a href=#the-track-element>track</a></code> element is created.<li>The <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-14>text track</a> has its <a href=#text-track-mode id=sourcing-out-of-band-text-tracks:text-track-mode-8>text track mode</a> changed.<li>The <code id=sourcing-out-of-band-text-tracks:the-track-element-12><a href=#the-track-element>track</a></code> element's parent element changes and the new parent is a <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-15>media
   element</a>.</ul>

  <p>When a user agent is to <dfn id=start-the-track-processing-model>start the <code>track</code> processing model</dfn> for a
  <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-15>text track</a> and its <code id=sourcing-out-of-band-text-tracks:the-track-element-13><a href=#the-track-element>track</a></code> element, it must run the following algorithm.
  This algorithm interacts closely with the <a id=sourcing-out-of-band-text-tracks:event-loop href=webappapis.html#event-loop>event loop</a> mechanism; in particular, it has
  a <a id=sourcing-out-of-band-text-tracks:synchronous-section href=webappapis.html#synchronous-section>synchronous section</a> (which is triggered as part of the <a id=sourcing-out-of-band-text-tracks:event-loop-2 href=webappapis.html#event-loop>event loop</a>
  algorithm). The steps in that section are marked with ⌛.</p>

  <ol><li><p>If another occurrence of this algorithm is already running for this <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-16>text
   track</a> and its <code id=sourcing-out-of-band-text-tracks:the-track-element-14><a href=#the-track-element>track</a></code> element, return, letting that other algorithm
   take care of this element.<li><p>If the <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-17>text track</a>'s <a href=#text-track-mode id=sourcing-out-of-band-text-tracks:text-track-mode-9>text track mode</a> is not set to one of <a href=#text-track-hidden id=sourcing-out-of-band-text-tracks:text-track-hidden-2>hidden</a> or <a href=#text-track-showing id=sourcing-out-of-band-text-tracks:text-track-showing-4>showing</a>,
   then return.<li><p>If the <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-18>text track</a>'s <code id=sourcing-out-of-band-text-tracks:the-track-element-15><a href=#the-track-element>track</a></code> element does not have a <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-16>media
   element</a> as a parent, return.<li><p>Run the remainder of these steps <a id=sourcing-out-of-band-text-tracks:in-parallel href=infrastructure.html#in-parallel>in parallel</a>, allowing whatever caused these steps to
   run to continue.<li><p><i>Top</i>: <a id=sourcing-out-of-band-text-tracks:await-a-stable-state href=webappapis.html#await-a-stable-state>Await a stable state</a>. The <a id=sourcing-out-of-band-text-tracks:synchronous-section-2 href=webappapis.html#synchronous-section>synchronous section</a>
   consists of the following steps. (The steps in the <a id=sourcing-out-of-band-text-tracks:synchronous-section-3 href=webappapis.html#synchronous-section>synchronous section</a> are marked
   with ⌛.)<li><p>⌛ Set the <a href=#text-track-readiness-state id=sourcing-out-of-band-text-tracks:text-track-readiness-state-2>text track readiness state</a> to <a href=#text-track-loading id=sourcing-out-of-band-text-tracks:text-track-loading>loading</a>.<li><p>⌛ Let <var>URL</var> be the <a href=#track-url id=sourcing-out-of-band-text-tracks:track-url-2>track URL</a> of the
   <code id=sourcing-out-of-band-text-tracks:the-track-element-16><a href=#the-track-element>track</a></code> element.<li><p>⌛ If the <code id=sourcing-out-of-band-text-tracks:the-track-element-17><a href=#the-track-element>track</a></code> element's parent is a <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-17>media element</a>, then
   let <var>corsAttributeState</var> be the state of the parent <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-18>media element</a>'s <code id=sourcing-out-of-band-text-tracks:attr-media-crossorigin><a href=#attr-media-crossorigin>crossorigin</a></code> content attribute. Otherwise, let
   <var>corsAttributeState</var> be <a href=urls-and-fetching.html#attr-crossorigin-none id=sourcing-out-of-band-text-tracks:attr-crossorigin-none>No CORS</a>.<li><p>End the <a id=sourcing-out-of-band-text-tracks:synchronous-section-4 href=webappapis.html#synchronous-section>synchronous section</a>, continuing the remaining steps
   <a id=sourcing-out-of-band-text-tracks:in-parallel-2 href=infrastructure.html#in-parallel>in parallel</a>.<li>
    <p>If <var>URL</var> is not the empty string, then:

    <ol><li><p>Let <var>request</var> be the result of <a href=urls-and-fetching.html#create-a-potential-cors-request id=sourcing-out-of-band-text-tracks:create-a-potential-cors-request>creating a potential-CORS request</a> given
     <var>URL</var>, "<code>track</code>", and <var>corsAttributeState</var>, and with the
     <i>same-origin fallback flag</i> set.<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#concept-request-client id=sourcing-out-of-band-text-tracks:concept-request-client data-x-internal=concept-request-client>client</a> to the
     <code id=sourcing-out-of-band-text-tracks:the-track-element-18><a href=#the-track-element>track</a></code> element's <a id=sourcing-out-of-band-text-tracks:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a id=sourcing-out-of-band-text-tracks:relevant-settings-object href=webappapis.html#relevant-settings-object>relevant settings
     object</a>.<li><p>Set <var>request</var>'s <a href=https://fetch.spec.whatwg.org/#request-initiator-type id=sourcing-out-of-band-text-tracks:concept-request-initiator-type data-x-internal=concept-request-initiator-type>initiator
     type</a> to "<code>track</code>".<li><p><a href=https://fetch.spec.whatwg.org/#concept-fetch id=sourcing-out-of-band-text-tracks:concept-fetch data-x-internal=concept-fetch>Fetch</a> <var>request</var>.</ol>

    <p>The <a href=webappapis.html#concept-task id=sourcing-out-of-band-text-tracks:concept-task>tasks</a> <a href=webappapis.html#queue-a-task id=sourcing-out-of-band-text-tracks:queue-a-task>queued</a> by the
    fetching algorithm on the <a id=sourcing-out-of-band-text-tracks:networking-task-source href=webappapis.html#networking-task-source>networking task source</a> to process the data as it is being
    fetched must determine the  type of
    the resource. If the  type of the resource is not a supported text
    track format, the load will fail, as described below. Otherwise, the resource's data must be
    passed to the appropriate parser (e.g., the <a id=sourcing-out-of-band-text-tracks:webvtt-parser href=https://w3c.github.io/webvtt/#webvtt-parser data-x-internal=webvtt-parser>WebVTT parser</a>) as it is received, with the <a href=#text-track-list-of-cues id=sourcing-out-of-band-text-tracks:text-track-list-of-cues-2>text
    track list of cues</a> being used for that parser's output. <a href=references.html#refsWEBVTT>[WEBVTT]</a></p>

    <p class=note>The appropriate parser will incrementally update the <a href=#text-track-list-of-cues id=sourcing-out-of-band-text-tracks:text-track-list-of-cues-3>text track list of
    cues</a> during these <a id=sourcing-out-of-band-text-tracks:networking-task-source-2 href=webappapis.html#networking-task-source>networking task
    source</a> <a href=webappapis.html#concept-task id=sourcing-out-of-band-text-tracks:concept-task-2>tasks</a>, as each such task is
    run with whatever data has been received from the network).</p>

    <p class=critical>This specification does not currently say whether or how to check the MIME
    types of text tracks, or whether or how to perform file type sniffing using the actual file
    data. Implementers differ in their intentions on this matter and it is therefore unclear what
    the right solution is. In the absence of any requirement here, the HTTP specifications' strict
    requirement to follow the Content-Type header prevails ("Content-Type specifies the media type
    of the underlying data." ... "If and only if the media type is not given by a Content-Type
    field, the recipient MAY attempt to guess the media type via inspection of its content
    and/or the name extension(s) of the URI used to identify the resource.").</p>

    <p>If fetching fails for any reason (network error, the server returns an error code, CORS
    fails, etc.), or if <var>URL</var> is the empty string, then <a id=sourcing-out-of-band-text-tracks:queue-an-element-task href=webappapis.html#queue-an-element-task>queue an element task</a>
    on the <a id=sourcing-out-of-band-text-tracks:dom-manipulation-task-source href=webappapis.html#dom-manipulation-task-source>DOM manipulation task source</a> given the <a href=#media-element id=sourcing-out-of-band-text-tracks:media-element-19>media element</a> to first
    change the <a href=#text-track-readiness-state id=sourcing-out-of-band-text-tracks:text-track-readiness-state-3>text track readiness state</a> to <a href=#text-track-failed-to-load id=sourcing-out-of-band-text-tracks:text-track-failed-to-load>failed to load</a> and then <a href=https://dom.spec.whatwg.org/#concept-event-fire id=sourcing-out-of-band-text-tracks:concept-event-fire-3 data-x-internal=concept-event-fire>fire an event</a>
    named <code id=sourcing-out-of-band-text-tracks:event-track-error><a href=#event-track-error>error</a></code> at the <code id=sourcing-out-of-band-text-tracks:the-track-element-19><a href=#the-track-element>track</a></code> element.</p>
    

    <p>If fetching does not fail, but the  type of the resource is not a supported
    text track format, or the file was not successfully processed (e.g., the format in question is
    an XML format and the file contained a well-formedness error that <cite>XML</cite> requires be
    detected and reported to the application), then the <a href=webappapis.html#concept-task id=sourcing-out-of-band-text-tracks:concept-task-3>task</a> that
    is <a href=webappapis.html#queue-an-element-task id=sourcing-out-of-band-text-tracks:queue-an-element-task-2>queued</a> on the <a id=sourcing-out-of-band-text-tracks:networking-task-source-3 href=webappapis.html#networking-task-source>networking task source</a>
    in which the aforementioned problem is found must change the <a href=#text-track-readiness-state id=sourcing-out-of-band-text-tracks:text-track-readiness-state-4>text track readiness
    state</a> to <a href=#text-track-failed-to-load id=sourcing-out-of-band-text-tracks:text-track-failed-to-load-2>failed to load</a> and <a href=https://dom.spec.whatwg.org/#concept-event-fire id=sourcing-out-of-band-text-tracks:concept-event-fire-4 data-x-internal=concept-event-fire>fire an event</a> named <code id=sourcing-out-of-band-text-tracks:event-track-error-2><a href=#event-track-error>error</a></code> at the <code id=sourcing-out-of-band-text-tracks:the-track-element-20><a href=#the-track-element>track</a></code> element.</p>

    <p>If fetching does not fail, and the file was successfully processed, then the final <a href=webappapis.html#concept-task id=sourcing-out-of-band-text-tracks:concept-task-4>task</a> that is <a href=webappapis.html#queue-an-element-task id=sourcing-out-of-band-text-tracks:queue-an-element-task-3>queued</a> by
    the <a id=sourcing-out-of-band-text-tracks:networking-task-source-4 href=webappapis.html#networking-task-source>networking task source</a>, after it has finished parsing the data, must change the
    <a href=#text-track-readiness-state id=sourcing-out-of-band-text-tracks:text-track-readiness-state-5>text track readiness state</a> to <a href=#text-track-loaded id=sourcing-out-of-band-text-tracks:text-track-loaded>loaded</a>, and
    <a href=https://dom.spec.whatwg.org/#concept-event-fire id=sourcing-out-of-band-text-tracks:concept-event-fire-5 data-x-internal=concept-event-fire>fire an event</a> named <code id=sourcing-out-of-band-text-tracks:event-track-load><a href=#event-track-load>load</a></code> at the <code id=sourcing-out-of-band-text-tracks:the-track-element-21><a href=#the-track-element>track</a></code> element.</p>

    <p>If, while fetching is ongoing, either:</p>

    <ul><li>the <a href=#track-url id=sourcing-out-of-band-text-tracks:track-url-3>track URL</a> changes so that it is no longer equal to <var>URL</var>, while the <a href=#text-track-mode id=sourcing-out-of-band-text-tracks:text-track-mode-10>text track mode</a> is set to <a href=#text-track-hidden id=sourcing-out-of-band-text-tracks:text-track-hidden-3>hidden</a> or <a href=#text-track-showing id=sourcing-out-of-band-text-tracks:text-track-showing-5>showing</a>; or<li>the <a href=#text-track-mode id=sourcing-out-of-band-text-tracks:text-track-mode-11>text track mode</a> changes to <a href=#text-track-hidden id=sourcing-out-of-band-text-tracks:text-track-hidden-4>hidden</a>
     or <a href=#text-track-showing id=sourcing-out-of-band-text-tracks:text-track-showing-6>showing</a>, while the <a href=#track-url id=sourcing-out-of-band-text-tracks:track-url-4>track URL</a> is not
     equal to <var>URL</var>,</ul>

    <p>...then the user agent must abort <a href=https://fetch.spec.whatwg.org/#concept-fetch id=sourcing-out-of-band-text-tracks:concept-fetch-2 data-x-internal=concept-fetch>fetching</a>, discarding
    any pending <a href=webappapis.html#concept-task id=sourcing-out-of-band-text-tracks:concept-task-5>tasks</a> generated by that algorithm (and in
    particular, not adding any cues to the <a href=#text-track-list-of-cues id=sourcing-out-of-band-text-tracks:text-track-list-of-cues-4>text track list of cues</a> after the moment the
    URL changed), and then <a id=sourcing-out-of-band-text-tracks:queue-an-element-task-4 href=webappapis.html#queue-an-element-task>queue an element task</a> on the <a id=sourcing-out-of-band-text-tracks:dom-manipulation-task-source-2 href=webappapis.html#dom-manipulation-task-source>DOM manipulation task
    source</a> given the <code id=sourcing-out-of-band-text-tracks:the-track-element-22><a href=#the-track-element>track</a></code> element that first changes the <a href=#text-track-readiness-state id=sourcing-out-of-band-text-tracks:text-track-readiness-state-6>text track
    readiness state</a> to <a href=#text-track-failed-to-load id=sourcing-out-of-band-text-tracks:text-track-failed-to-load-3>failed to load</a> and
    then <a href=https://dom.spec.whatwg.org/#concept-event-fire id=sourcing-out-of-band-text-tracks:concept-event-fire-6 data-x-internal=concept-event-fire>fires an event</a> named <code id=sourcing-out-of-band-text-tracks:event-track-error-3><a href=#event-track-error>error</a></code> at the <code id=sourcing-out-of-band-text-tracks:the-track-element-23><a href=#the-track-element>track</a></code> element. </p>
   <li><p>Wait until the <a href=#text-track-readiness-state id=sourcing-out-of-band-text-tracks:text-track-readiness-state-7>text track readiness state</a> is no longer set to <a href=#text-track-loading id=sourcing-out-of-band-text-tracks:text-track-loading-2>loading</a>.<li><p>Wait until the <a href=#track-url id=sourcing-out-of-band-text-tracks:track-url-5>track URL</a> is no longer equal to <var>URL</var>, at
   the same time as the <a href=#text-track-mode id=sourcing-out-of-band-text-tracks:text-track-mode-12>text track mode</a> is set to <a href=#text-track-hidden id=sourcing-out-of-band-text-tracks:text-track-hidden-5>hidden</a> or <a href=#text-track-showing id=sourcing-out-of-band-text-tracks:text-track-showing-7>showing</a>.<li><p>Jump to the step labeled <i>top</i>.</ol>

  <p>Whenever a <code id=sourcing-out-of-band-text-tracks:the-track-element-24><a href=#the-track-element>track</a></code> element has its <code id=sourcing-out-of-band-text-tracks:attr-track-src><a href=#attr-track-src>src</a></code> attribute
  set, changed, or removed, the user agent must <a id=sourcing-out-of-band-text-tracks:immediately href=infrastructure.html#immediately>immediately</a> empty the element's <a href=#text-track id=sourcing-out-of-band-text-tracks:text-track-19>text
  track</a>'s <a href=#text-track-list-of-cues id=sourcing-out-of-band-text-tracks:text-track-list-of-cues-5>text track list of cues</a>. (This also causes the algorithm above to stop
  adding cues from the resource being obtained using the previously given URL, if any.)</p>

  


  

  <h6 id=guidelines-for-exposing-cues-in-various-formats-as-text-track-cues><span class=secno>4.8.11.11.4</span> <dfn>Guidelines for exposing cues</dfn> in various formats as <a href=#text-track-cue id=guidelines-for-exposing-cues-in-various-formats-as-text-track-cues:text-track-cue>text track cues</a><a href=#guidelines-for-exposing-cues-in-various-formats-as-text-track-cues class=self-link></a></h6>

  <p>How a specific format's text track cues are to be interpreted for the purposes of processing by
  an HTML user agent is defined by that format. In the absence of such a specification, this section
  provides some constraints within which implementations can attempt to consistently expose such
  formats.</p>

  <p>To support the <a href=#text-track id=guidelines-for-exposing-cues-in-various-formats-as-text-track-cues:text-track>text track</a> model of HTML, each unit of timed data is converted to a
  <a href=#text-track-cue id=guidelines-for-exposing-cues-in-various-formats-as-text-track-cues:text-track-cue-2>text track cue</a>. Where the mapping of the format's features to the aspects of a
  <a href=#text-track-cue id=guidelines-for-exposing-cues-in-various-formats-as-text-track-cues:text-track-cue-3>text track cue</a> as defined in this specification are not defined, implementations must
  ensure that the mapping is consistent with the definitions of the aspects of a <a href=#text-track-cue id=guidelines-for-exposing-cues-in-various-formats-as-text-track-cues:text-track-cue-4>text track
  cue</a> as defined above, as well as with the following constraints:</p>

  <dl><dt>The <a href=#text-track-cue-identifier id=guidelines-for-exposing-cues-in-various-formats-as-text-track-cues:text-track-cue-identifier>text track cue identifier</a>
   <dd>
    <p>Should be set to the empty string if the format has no obvious analogue to a per-cue
    identifier.</p>
   <dt>The <a href=#text-track-cue-pause-on-exit-flag id=guidelines-for-exposing-cues-in-various-formats-as-text-track-cues:text-track-cue-pause-on-exit-flag>text track cue pause-on-exit flag</a>
   <dd>
    <p>Should be set to false.</p>
   </dl>

  


  <h6 id=text-track-api><span class=secno>4.8.11.11.5</span> Text track API<a href=#text-track-api class=self-link></a></h6><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList title="The TextTrackList interface is used to represent a list of the text tracks defined by the <track> element, with each track represented by a separate textTrack object in the list.">TextTrackList</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='texttracklist' data-dfn-type='interface'><c- g>TextTrackList</c-></dfn> : <a id='text-track-api:eventtarget' href='https://dom.spec.whatwg.org/#interface-eventtarget' data-x-internal='eventtarget'><c- n>EventTarget</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-texttracklist-length' id='text-track-api:dom-texttracklist-length'><c- g>length</c-></a>;
  <a href='#dom-texttracklist-item'><c- b>getter</c-></a> <a href='#texttrack' id='text-track-api:texttrack'><c- n>TextTrack</c-></a> (<c- b>unsigned</c-> <c- b>long</c-> <c- g>index</c->);
  <a href='#texttrack' id='text-track-api:texttrack-2'><c- n>TextTrack</c-></a>? <a href='#dom-texttracklist-gettrackbyid' id='text-track-api:dom-texttracklist-gettrackbyid'><c- g>getTrackById</c-></a>(<c- b>DOMString</c-> <c- g>id</c->);

  <c- b>attribute</c-> <a id='text-track-api:eventhandler' href='webappapis.html#eventhandler'><c- n>EventHandler</c-></a> <a href='#handler-texttracklist-onchange' id='text-track-api:handler-texttracklist-onchange'><c- g>onchange</c-></a>;
  <c- b>attribute</c-> <a id='text-track-api:eventhandler-2' href='webappapis.html#eventhandler'><c- n>EventHandler</c-></a> <a href='#handler-texttracklist-onaddtrack' id='text-track-api:handler-texttracklist-onaddtrack'><c- g>onaddtrack</c-></a>;
  <c- b>attribute</c-> <a id='text-track-api:eventhandler-3' href='webappapis.html#eventhandler'><c- n>EventHandler</c-></a> <a href='#handler-texttracklist-onremovetrack' id='text-track-api:handler-texttracklist-onremovetrack'><c- g>onremovetrack</c-></a>;
};</code></pre>

  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-media-texttracks id=dom-media-texttracks-dev>textTracks</a>.<span>length</span></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/textTracks title="The read-only textTracks property on HTMLMediaElement objects returns a TextTrackList object listing all of the TextTrack objects representing the media element's text tracks, in the same order as in the list of text tracks.">HTMLMediaElement/textTracks</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>1.0+</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the number of <a href=#text-track id=text-track-api:text-track>text tracks</a> associated with the
    <a href=#media-element id=text-track-api:media-element>media element</a> (e.g. from <code id=text-track-api:the-track-element><a href=#the-track-element>track</a></code> elements). This is the number of <a href=#text-track id=text-track-api:text-track-2>text tracks</a> in the <a href=#media-element id=text-track-api:media-element-2>media element</a>'s <a href=#list-of-text-tracks id=text-track-api:list-of-text-tracks>list of text
    tracks</a>.</p>
   <dt><code><var>media</var>.<a href=#dom-media-texttracks id=text-track-api:dom-media-texttracks>textTracks[</a> <var>n</var> <span>]</span></code><dd>
    <p>Returns the <code id=text-track-api:texttrack-3><a href=#texttrack>TextTrack</a></code> object representing the <var>n</var>th <a href=#text-track id=text-track-api:text-track-3>text
    track</a> in the <a href=#media-element id=text-track-api:media-element-3>media element</a>'s <a href=#list-of-text-tracks id=text-track-api:list-of-text-tracks-2>list of text tracks</a>.</p>
   <dt><code><var>textTrack</var> = <var>media</var>.<a href=#dom-media-texttracks id=text-track-api:dom-media-texttracks-2>textTracks</a>.<a href=#dom-texttracklist-gettrackbyid id=dom-texttracklist-gettrackbyid-dev>getTrackById</a>(<var>id</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList/getTrackById title="The TextTrackList method getTrackById() returns the first TextTrack object from the track list whose id matches the specified string. This lets you find a specified track if you know its ID string.">TextTrackList/getTrackById</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome yes"><span>Chrome</span><span>33+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns the <code id=text-track-api:texttrack-4><a href=#texttrack>TextTrack</a></code> object with the given identifier, or null if no track has
    that identifier.</p>
   </dl>

  

  <p>A <code id=text-track-api:texttracklist><a href=#texttracklist>TextTrackList</a></code> object represents a dynamically updating list of <a href=#text-track id=text-track-api:text-track-4>text tracks</a> in a given order.</p>

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-texttracks data-dfn-type=attribute><code>textTracks</code></dfn> attribute of <a href=#media-element id=text-track-api:media-element-4>media elements</a> must return a <code id=text-track-api:texttracklist-2><a href=#texttracklist>TextTrackList</a></code> object representing the
  <code id=text-track-api:texttrack-5><a href=#texttrack>TextTrack</a></code> objects of the <a href=#text-track id=text-track-api:text-track-5>text tracks</a> in the
  <a href=#media-element id=text-track-api:media-element-5>media element</a>'s <a href=#list-of-text-tracks id=text-track-api:list-of-text-tracks-3>list of text tracks</a>, in the same order as in the
  <a href=#list-of-text-tracks id=text-track-api:list-of-text-tracks-4>list of text tracks</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList/length title="The read-only TextTrackList property length returns the number of entries in the TextTrackList, each of which is a TextTrack representing one track in the media element.">TextTrackList/length</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=TextTrackList id=dom-texttracklist-length data-dfn-type=attribute><code>length</code></dfn> attribute of a <code id=text-track-api:texttracklist-3><a href=#texttracklist>TextTrackList</a></code>
  object must return the number of <a href=#text-track id=text-track-api:text-track-6>text tracks</a> in the list
  represented by the <code id=text-track-api:texttracklist-4><a href=#texttracklist>TextTrackList</a></code> object.</p>

  <p>The <a id=text-track-api:supported-property-indices href=https://webidl.spec.whatwg.org/#dfn-supported-property-indices data-x-internal=supported-property-indices>supported property indices</a> of a <code id=text-track-api:texttracklist-5><a href=#texttracklist>TextTrackList</a></code> object at any
  instant are the numbers from zero to the number of <a href=#text-track id=text-track-api:text-track-7>text tracks</a> in
  the list represented by the <code id=text-track-api:texttracklist-6><a href=#texttracklist>TextTrackList</a></code> object minus one, if any. If there are no
  <a href=#text-track id=text-track-api:text-track-8>text tracks</a> in the list, there are no <a id=text-track-api:supported-property-indices-2 href=https://webidl.spec.whatwg.org/#dfn-supported-property-indices data-x-internal=supported-property-indices>supported property
  indices</a>.</p>

  <p id=dom-texttracklist-item>To <a id=text-track-api:determine-the-value-of-an-indexed-property href=https://webidl.spec.whatwg.org/#dfn-determine-the-value-of-an-indexed-property data-x-internal=determine-the-value-of-an-indexed-property>determine the value of an indexed property</a> of a
  <code id=text-track-api:texttracklist-7><a href=#texttracklist>TextTrackList</a></code> object for a given index <var>index</var>, the user agent must return
  the <var>index</var>th <a href=#text-track id=text-track-api:text-track-9>text track</a> in the list represented by the
  <code id=text-track-api:texttracklist-8><a href=#texttracklist>TextTrackList</a></code> object.</p>

  <p>The <dfn data-dfn-for=TextTrackList id=dom-texttracklist-gettrackbyid data-dfn-type=method><code>getTrackById(<var>id</var>)</code></dfn> method must
  return the first <code id=text-track-api:texttrack-6><a href=#texttrack>TextTrack</a></code> in the <code id=text-track-api:texttracklist-9><a href=#texttracklist>TextTrackList</a></code> object whose <code id=text-track-api:dom-texttrack-id><a href=#dom-texttrack-id>id</a></code> IDL attribute would return a value equal to the value of the
  <var>id</var> argument. When no tracks match the given argument, the method must return null.</p>

  

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrack title="The TextTrack interface—part of the API for handling WebVTT (text tracks on media presentations)—describes and controls the text track associated with a particular <track> element.">TextTrack</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>31+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><pre><code class='idl'><c- b>enum</c-> <dfn id='texttrackmode' data-dfn-type='enum'><c- g>TextTrackMode</c-></dfn> { <c- s>&quot;</c-><a href='#dom-texttrack-disabled' id='text-track-api:dom-texttrack-disabled'><c- s>disabled</c-></a><c- s>&quot;</c->,  <c- s>&quot;</c-><a href='#dom-texttrack-hidden' id='text-track-api:dom-texttrack-hidden'><c- s>hidden</c-></a><c- s>&quot;</c->,  <c- s>&quot;</c-><a href='#dom-texttrack-showing' id='text-track-api:dom-texttrack-showing'><c- s>showing</c-></a><c- s>&quot;</c-> };
<c- b>enum</c-> <dfn id='texttrackkind' data-dfn-type='enum'><c- g>TextTrackKind</c-></dfn> { <c- s>&quot;</c-><a href='#dom-texttrack-kind-subtitles' id='text-track-api:dom-texttrack-kind-subtitles'><c- s>subtitles</c-></a><c- s>&quot;</c->,  <c- s>&quot;</c-><a href='#dom-texttrack-kind-captions' id='text-track-api:dom-texttrack-kind-captions'><c- s>captions</c-></a><c- s>&quot;</c->,  <c- s>&quot;</c-><a href='#dom-texttrack-kind-descriptions' id='text-track-api:dom-texttrack-kind-descriptions'><c- s>descriptions</c-></a><c- s>&quot;</c->,  <c- s>&quot;</c-><a href='#dom-texttrack-kind-chapters' id='text-track-api:dom-texttrack-kind-chapters'><c- s>chapters</c-></a><c- s>&quot;</c->,  <c- s>&quot;</c-><a href='#dom-texttrack-kind-metadata' id='text-track-api:dom-texttrack-kind-metadata'><c- s>metadata</c-></a><c- s>&quot;</c-> };

[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='texttrack' data-dfn-type='interface'><c- g>TextTrack</c-></dfn> : <a id='text-track-api:eventtarget-2' href='https://dom.spec.whatwg.org/#interface-eventtarget' data-x-internal='eventtarget'><c- n>EventTarget</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a href='#texttrackkind' id='text-track-api:texttrackkind'><c- n>TextTrackKind</c-></a> <a href='#dom-texttrack-kind' id='text-track-api:dom-texttrack-kind'><c- g>kind</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-texttrack-label' id='text-track-api:dom-texttrack-label'><c- g>label</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-texttrack-language' id='text-track-api:dom-texttrack-language'><c- g>language</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-texttrack-id' id='text-track-api:dom-texttrack-id-2'><c- g>id</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-texttrack-inbandmetadatatrackdispatchtype' id='text-track-api:dom-texttrack-inbandmetadatatrackdispatchtype'><c- g>inBandMetadataTrackDispatchType</c-></a>;

  <c- b>attribute</c-> <a href='#texttrackmode' id='text-track-api:texttrackmode'><c- n>TextTrackMode</c-></a> <a href='#dom-texttrack-mode' id='text-track-api:dom-texttrack-mode'><c- g>mode</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a href='#texttrackcuelist' id='text-track-api:texttrackcuelist'><c- n>TextTrackCueList</c-></a>? <a href='#dom-texttrack-cues' id='text-track-api:dom-texttrack-cues'><c- g>cues</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a href='#texttrackcuelist' id='text-track-api:texttrackcuelist-2'><c- n>TextTrackCueList</c-></a>? <a href='#dom-texttrack-activecues' id='text-track-api:dom-texttrack-activecues'><c- g>activeCues</c-></a>;

  <c- b>undefined</c-> <a href='#dom-texttrack-addcue' id='text-track-api:dom-texttrack-addcue'><c- g>addCue</c-></a>(<a href='#texttrackcue' id='text-track-api:texttrackcue'><c- n>TextTrackCue</c-></a> <c- g>cue</c->);
  <c- b>undefined</c-> <a href='#dom-texttrack-removecue' id='text-track-api:dom-texttrack-removecue'><c- g>removeCue</c-></a>(<a href='#texttrackcue' id='text-track-api:texttrackcue-2'><c- n>TextTrackCue</c-></a> <c- g>cue</c->);

  <c- b>attribute</c-> <a id='text-track-api:eventhandler-4' href='webappapis.html#eventhandler'><c- n>EventHandler</c-></a> <a href='#handler-texttrack-oncuechange' id='text-track-api:handler-texttrack-oncuechange'><c- g>oncuechange</c-></a>;
};</code></pre>

  <dl class=domintro><dt><code><var>textTrack</var> = <var>media</var>.<a href=#dom-media-addtexttrack id=dom-media-addtexttrack-dev>addTextTrack</a>(<var>kind</var> [, <var>label</var> [, <var>language</var> ] ])</code><dd>
    <p>Creates and returns a new <code id=text-track-api:texttrack-7><a href=#texttrack>TextTrack</a></code> object, which is also added to the
    <a href=#media-element id=text-track-api:media-element-6>media element</a>'s <a href=#list-of-text-tracks id=text-track-api:list-of-text-tracks-5>list of text tracks</a>.</p>
   <dt><code><var>textTrack</var>.<a href=#dom-texttrack-kind id=dom-texttrack-kind-dev>kind</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/kind title="The kind read-only property of the TextTrack interface returns the kind of text track this object represents. This decides how the track will be handled by a user agent.">TextTrack/kind</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Returns the <a href=#text-track-kind id=text-track-api:text-track-kind>text track kind</a> string.<dt><code><var>textTrack</var>.<a href=#dom-texttrack-label id=dom-texttrack-label-dev>label</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/label title="The label read-only property of the TextTrack interface returns a human-readable label for the text track, if it is available.">TextTrack/label</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the <a href=#text-track-label id=text-track-api:text-track-label>text track label</a>, if there is one, or the empty string otherwise
    (indicating that a custom label probably needs to be generated from the other attributes of the
    object if the object is exposed to the user).</p>
   <dt><code><var>textTrack</var>.<a href=#dom-texttrack-language id=dom-texttrack-language-dev>language</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/language title="The language read-only property of the TextTrack interface returns the language of the text track.">TextTrack/language</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Returns the <a href=#text-track-language id=text-track-api:text-track-language>text track language</a> string.<dt><code><var>textTrack</var>.<a href=#dom-texttrack-id id=dom-texttrack-id-dev>id</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/id title="The id read-only property of the TextTrack interface returns the ID of the track if it has one.">TextTrack/id</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome yes"><span>Chrome</span><span>33+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>Returns the ID of the given track.</p>

    <p>For in-band tracks, this is the ID that can be used with a <a href=https://url.spec.whatwg.org/#concept-url-fragment id=text-track-api:concept-url-fragment data-x-internal=concept-url-fragment>fragment</a> if the format supports <a id=text-track-api:media-fragment-syntax href=https://www.w3.org/TR/media-frags/#media-fragment-syntax data-x-internal=media-fragment-syntax>media fragment
    syntax</a>, and that can be used with the <code id=text-track-api:dom-texttracklist-gettrackbyid-2><a href=#dom-texttracklist-gettrackbyid>getTrackById()</a></code> method.</p>

    <p>For <code id=text-track-api:texttrack-8><a href=#texttrack>TextTrack</a></code> objects corresponding to <code id=text-track-api:the-track-element-2><a href=#the-track-element>track</a></code> elements, this is the
    ID of the <code id=text-track-api:the-track-element-3><a href=#the-track-element>track</a></code> element.</p>
   <dt><code><var>textTrack</var>.<a href=#dom-texttrack-inbandmetadatatrackdispatchtype id=dom-texttrack-inbandmetadatatrackdispatchtype-dev>inBandMetadataTrackDispatchType</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/inBandMetadataTrackDispatchType title="The inBandMetadataTrackDispatchType read-only property of the TextTrack interface returns the text track's in-band metadata dispatch type of the text track represented by the TextTrack object.">TextTrack/inBandMetadataTrackDispatchType</a><div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome no"><span>Chrome</span><span>No</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink no"><span>Edge</span><span>No</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd><p>Returns the <a href=#text-track-in-band-metadata-track-dispatch-type id=text-track-api:text-track-in-band-metadata-track-dispatch-type>text track in-band metadata track dispatch type</a> string.<dt><code><var>textTrack</var>.<a href=#dom-texttrack-mode id=dom-texttrack-mode-dev>mode</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/mode title="The TextTrack interface's mode property is a string specifying and controlling the text track's mode: disabled, hidden, or showing. You can read this value to determine the current mode, and you can change this value to switch modes.">TextTrack/mode</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>31+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the <a href=#text-track-mode id=text-track-api:text-track-mode>text track mode</a>, represented by a string from the following
    list:</p>

    <dl><dt>"<code id=text-track-api:dom-texttrack-disabled-2><a href=#dom-texttrack-disabled>disabled</a></code>"<dd><p>The <a href=#text-track-disabled id=text-track-api:text-track-disabled>text track disabled</a> mode.<dt>"<code id=text-track-api:dom-texttrack-hidden-2><a href=#dom-texttrack-hidden>hidden</a></code>"<dd><p>The <a href=#text-track-hidden id=text-track-api:text-track-hidden>text track hidden</a> mode.<dt>"<code id=text-track-api:dom-texttrack-showing-2><a href=#dom-texttrack-showing>showing</a></code>"<dd><p>The <a href=#text-track-showing id=text-track-api:text-track-showing>text track showing</a> mode.</dl>

    <p>Can be set, to change the mode.</p>
   <dt><code><var>textTrack</var>.<a href=#dom-texttrack-cues id=dom-texttrack-cues-dev>cues</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/cues title="The cues read-only property of the TextTrack interface returns a TextTrackCueList object containing all of the track's cues.">TextTrack/cues</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>31+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues>text track list of cues</a>, as a <code id=text-track-api:texttrackcuelist-3><a href=#texttrackcuelist>TextTrackCueList</a></code>
    object.</p>
   <dt><code><var>textTrack</var>.<a href=#dom-texttrack-activecues id=dom-texttrack-activecues-dev>activeCues</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/activeCues title="The activeCues read-only property of the TextTrack interface returns a TextTrackCueList object listing the currently active cues.">TextTrack/activeCues</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>31+</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the <a href=#text-track-cue id=text-track-api:text-track-cue>text track cues</a> from the <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-2>text track
    list of cues</a> that are currently active (i.e. that start before the <a href=#current-playback-position id=text-track-api:current-playback-position>current playback
    position</a> and end after it), as a <code id=text-track-api:texttrackcuelist-4><a href=#texttrackcuelist>TextTrackCueList</a></code> object.</p>
   <dt><code><var>textTrack</var>.<a href=#dom-texttrack-addcue id=dom-texttrack-addcue-dev>addCue</a>(<var>cue</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/addCue title="The addCue() method of the TextTrack interface adds a new cue to the list of cues.">TextTrack/addCue</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Adds the given cue to <var>textTrack</var>'s <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-3>text track list of
   cues</a>.<dt><code><var>textTrack</var>.<a href=#dom-texttrack-removecue id=dom-texttrack-removecue-dev>removeCue</a>(<var>cue</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/removeCue title="The removeCue() method of the TextTrack interface removes a cue from the list of cues.">TextTrack/removeCue</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Removes the given cue from <var>textTrack</var>'s <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-4>text track list of
   cues</a>.</dl>

  

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-addtexttrack data-dfn-type=method><code>addTextTrack(<var>kind</var>, <var>label</var>,
  <var>language</var>)</code></dfn> method of <a href=#media-element id=text-track-api:media-element-7>media elements</a>,
  when invoked, must run the following steps:</p>

  <ol><li>
    <p>Create a new <code id=text-track-api:texttrack-9><a href=#texttrack>TextTrack</a></code> object.</p>
   <li>
    <p>Create a new <a href=#text-track id=text-track-api:text-track-10>text track</a> corresponding to the new object, and set its <a href=#text-track-kind id=text-track-api:text-track-kind-2>text
    track kind</a> to <var>kind</var>, its <a href=#text-track-label id=text-track-api:text-track-label-2>text track label</a> to <var>label</var>, its <a href=#text-track-language id=text-track-api:text-track-language-2>text track language</a> to <var>language</var>, its
    <a href=#text-track-readiness-state id=text-track-api:text-track-readiness-state>text track readiness state</a> to the <a href=#text-track-loaded id=text-track-api:text-track-loaded>text track loaded</a> state, its
    <a href=#text-track-mode id=text-track-api:text-track-mode-2>text track mode</a> to the <a href=#text-track-hidden id=text-track-api:text-track-hidden-2>text track hidden</a> mode, and its <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-5>text
    track list of cues</a> to an empty list.</p>

    <p>Initially, the <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-6>text track list of cues</a> is not associated with any <a href=#rules-for-updating-the-text-track-rendering id=text-track-api:rules-for-updating-the-text-track-rendering>rules
    for updating the text track rendering</a>. When a <a href=#text-track-cue id=text-track-api:text-track-cue-2>text track cue</a> is added to it,
    the <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-7>text track list of cues</a> has its rules permanently set accordingly.</p>
   <li>
    <p>Add the new <a href=#text-track id=text-track-api:text-track-11>text track</a> to the <a href=#media-element id=text-track-api:media-element-8>media element</a>'s <a href=#list-of-text-tracks id=text-track-api:list-of-text-tracks-6>list of text
    tracks</a>.</p>
   <li>
    <p><a href=#queue-a-media-element-task id=text-track-api:queue-a-media-element-task>Queue a media element task</a> given the <a href=#media-element id=text-track-api:media-element-9>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=text-track-api:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=text-track-api:event-media-addtrack><a href=#event-media-addtrack>addtrack</a></code> at the <a href=#media-element id=text-track-api:media-element-10>media element</a>'s <code id=text-track-api:dom-media-texttracks-3><a href=#dom-media-texttracks>textTracks</a></code> attribute's <code id=text-track-api:texttracklist-10><a href=#texttracklist>TextTrackList</a></code> object,
    using <code id=text-track-api:trackevent><a href=#trackevent>TrackEvent</a></code>, with the <code id=text-track-api:dom-trackevent-track><a href=#dom-trackevent-track>track</a></code>
    attribute initialized to the new <a href=#text-track id=text-track-api:text-track-12>text track</a>'s <code id=text-track-api:texttrack-10><a href=#texttrack>TextTrack</a></code> object.</p>
   <li>
    <p>Return the new <code id=text-track-api:texttrack-11><a href=#texttrack>TextTrack</a></code> object.</p>
   </ol>

  <hr>

  <p>The <dfn data-dfn-for=TextTrack id=dom-texttrack-kind data-dfn-type=attribute><code>kind</code></dfn>
  attribute must return the <a href=#text-track-kind id=text-track-api:text-track-kind-3>text track kind</a> of the <a href=#text-track id=text-track-api:text-track-13>text track</a> that the
  <code id=text-track-api:texttrack-12><a href=#texttrack>TextTrack</a></code> object represents.</p>

  <p>The <dfn data-dfn-for=TextTrack id=dom-texttrack-label data-dfn-type=attribute><code>label</code></dfn>
  attribute must return the <a href=#text-track-label id=text-track-api:text-track-label-3>text track label</a> of the <a href=#text-track id=text-track-api:text-track-14>text track</a> that the
  <code id=text-track-api:texttrack-13><a href=#texttrack>TextTrack</a></code> object represents.</p>

  <p>The <dfn data-dfn-for=TextTrack id=dom-texttrack-language data-dfn-type=attribute><code>language</code></dfn>
  attribute must return the <a href=#text-track-language id=text-track-api:text-track-language-3>text track language</a> of the <a href=#text-track id=text-track-api:text-track-15>text track</a> that the
  <code id=text-track-api:texttrack-14><a href=#texttrack>TextTrack</a></code> object represents.</p>

  <p>The <dfn data-dfn-for=TextTrack id=dom-texttrack-id data-dfn-type=attribute><code>id</code></dfn> attribute
  returns the track's identifier, if it has one, or the empty string otherwise. For tracks that
  correspond to <code id=text-track-api:the-track-element-4><a href=#the-track-element>track</a></code> elements, the track's identifier is the value of the element's
  <code id=text-track-api:the-id-attribute><a href=dom.html#the-id-attribute>id</a></code> attribute, if any. For in-band tracks, the track's identifier is
  specified by the <a href=#media-resource id=text-track-api:media-resource>media resource</a>. If the <a href=#media-resource id=text-track-api:media-resource-2>media resource</a> is in a format
  that supports <a id=text-track-api:media-fragment-syntax-2 href=https://www.w3.org/TR/media-frags/#media-fragment-syntax data-x-internal=media-fragment-syntax>media fragment syntax</a>, the identifier returned for a particular track
  must be the same identifier that would enable the track if used as the name of a track in the
  track dimension of such a <a href=https://url.spec.whatwg.org/#concept-url-fragment id=text-track-api:concept-url-fragment-2 data-x-internal=concept-url-fragment>fragment</a>.</p>

  <p>The <dfn data-dfn-for=TextTrack id=dom-texttrack-inbandmetadatatrackdispatchtype data-dfn-type=attribute><code>inBandMetadataTrackDispatchType</code></dfn>
  attribute must return the <a href=#text-track-in-band-metadata-track-dispatch-type id=text-track-api:text-track-in-band-metadata-track-dispatch-type-2>text track in-band metadata track dispatch type</a> of the
  <a href=#text-track id=text-track-api:text-track-16>text track</a> that the <code id=text-track-api:texttrack-15><a href=#texttrack>TextTrack</a></code> object represents.</p>

  <p>The <dfn data-dfn-for=TextTrack id=dom-texttrack-mode data-dfn-type=attribute><code>mode</code></dfn>
  attribute, on getting, must return the string corresponding to the <a href=#text-track-mode id=text-track-api:text-track-mode-3>text track mode</a> of
  the <a href=#text-track id=text-track-api:text-track-17>text track</a> that the <code id=text-track-api:texttrack-16><a href=#texttrack>TextTrack</a></code> object represents, as defined by the
  following list:</p>

  <dl><dt>"<dfn data-dfn-for=TextTrackMode id=dom-texttrack-disabled data-dfn-type=enum-value><code>disabled</code></dfn>"<dd>The <a href=#text-track-disabled id=text-track-api:text-track-disabled-2>text track disabled</a> mode.<dt>"<dfn data-dfn-for=TextTrackMode id=dom-texttrack-hidden data-dfn-type=enum-value><code>hidden</code></dfn>"<dd>The <a href=#text-track-hidden id=text-track-api:text-track-hidden-3>text track hidden</a> mode.<dt>"<dfn data-dfn-for=TextTrackMode id=dom-texttrack-showing data-dfn-type=enum-value><code>showing</code></dfn>"<dd>The <a href=#text-track-showing id=text-track-api:text-track-showing-2>text track showing</a> mode.</dl>

  <p>On setting, if the new value isn't equal to what the attribute would currently return, the new
  value must be processed as follows:</p>

  <dl class=switch><dt>If the new value is "<code id=text-track-api:dom-texttrack-disabled-3><a href=#dom-texttrack-disabled>disabled</a></code>"<dd>
    <p>Set the <a href=#text-track-mode id=text-track-api:text-track-mode-4>text track mode</a> of the <a href=#text-track id=text-track-api:text-track-18>text track</a> that the
    <code id=text-track-api:texttrack-17><a href=#texttrack>TextTrack</a></code> object represents to the <a href=#text-track-disabled id=text-track-api:text-track-disabled-3>text track disabled</a> mode.</p>
   <dt>If the new value is "<code id=text-track-api:dom-texttrack-hidden-3><a href=#dom-texttrack-hidden>hidden</a></code>"<dd>
    <p>Set the <a href=#text-track-mode id=text-track-api:text-track-mode-5>text track mode</a> of the <a href=#text-track id=text-track-api:text-track-19>text track</a> that the
    <code id=text-track-api:texttrack-18><a href=#texttrack>TextTrack</a></code> object represents to the <a href=#text-track-hidden id=text-track-api:text-track-hidden-4>text track hidden</a> mode.</p>
   <dt>If the new value is "<code id=text-track-api:dom-texttrack-showing-3><a href=#dom-texttrack-showing>showing</a></code>"<dd>
    <p>Set the <a href=#text-track-mode id=text-track-api:text-track-mode-6>text track mode</a> of the <a href=#text-track id=text-track-api:text-track-20>text track</a> that the
    <code id=text-track-api:texttrack-19><a href=#texttrack>TextTrack</a></code> object represents to the <a href=#text-track-showing id=text-track-api:text-track-showing-3>text track showing</a> mode.</p>
   </dl>

  <p>If the <a href=#text-track-mode id=text-track-api:text-track-mode-7>text track mode</a> of the <a href=#text-track id=text-track-api:text-track-21>text track</a> that the
  <code id=text-track-api:texttrack-20><a href=#texttrack>TextTrack</a></code> object represents is not the <a href=#text-track-disabled id=text-track-api:text-track-disabled-4>text track disabled</a> mode, then
  the <dfn data-dfn-for=TextTrack id=dom-texttrack-cues data-dfn-type=attribute><code>cues</code></dfn> attribute
  must return a <a id=text-track-api:live href=infrastructure.html#live>live</a> <code id=text-track-api:texttrackcuelist-5><a href=#texttrackcuelist>TextTrackCueList</a></code> object that represents the subset of
  the <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-8>text track list of cues</a> of the <a href=#text-track id=text-track-api:text-track-22>text track</a> that the
  <code id=text-track-api:texttrack-21><a href=#texttrack>TextTrack</a></code> object represents whose <a href=#text-track-cue-end-time id=text-track-api:text-track-cue-end-time>end
  times</a> occur at or after the <a href=#earliest-possible-position-when-the-script-started id=text-track-api:earliest-possible-position-when-the-script-started>earliest possible position when the script
  started</a>, in <a href=#text-track-cue-order id=text-track-api:text-track-cue-order>text track cue order</a>. Otherwise, it must return null. For each
  <code id=text-track-api:texttrack-22><a href=#texttrack>TextTrack</a></code> object, when an object is returned, the same <code id=text-track-api:texttrackcuelist-6><a href=#texttrackcuelist>TextTrackCueList</a></code>
  object must be returned each time.</p>

  <p>The <dfn id=earliest-possible-position-when-the-script-started>earliest possible position when the script started</dfn> is whatever the
  <a href=#earliest-possible-position id=text-track-api:earliest-possible-position>earliest possible position</a> was the last time the <a id=text-track-api:event-loop href=webappapis.html#event-loop>event loop</a> reached step
  1.</p>

  <p>If the <a href=#text-track-mode id=text-track-api:text-track-mode-8>text track mode</a> of the <a href=#text-track id=text-track-api:text-track-23>text track</a> that the
  <code id=text-track-api:texttrack-23><a href=#texttrack>TextTrack</a></code> object represents is not the <a href=#text-track-disabled id=text-track-api:text-track-disabled-5>text track disabled</a> mode, then
  the <dfn data-dfn-for=TextTrack id=dom-texttrack-activecues data-dfn-type=attribute><code>activeCues</code></dfn>
  attribute must return a <a id=text-track-api:live-2 href=infrastructure.html#live>live</a> <code id=text-track-api:texttrackcuelist-7><a href=#texttrackcuelist>TextTrackCueList</a></code> object that represents the
  subset of the <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-9>text track list of cues</a> of the <a href=#text-track id=text-track-api:text-track-24>text track</a> that the
  <code id=text-track-api:texttrack-24><a href=#texttrack>TextTrack</a></code> object represents whose <a href=#active-flag-was-set-when-the-script-started id=text-track-api:active-flag-was-set-when-the-script-started>active flag was set when the script
  started</a>, in <a href=#text-track-cue-order id=text-track-api:text-track-cue-order-2>text track cue order</a>. Otherwise, it must return null. For each
  <code id=text-track-api:texttrack-25><a href=#texttrack>TextTrack</a></code> object, when an object is returned, the same <code id=text-track-api:texttrackcuelist-8><a href=#texttrackcuelist>TextTrackCueList</a></code>
  object must be returned each time.</p>

  <p>A <a href=#text-track-cue id=text-track-api:text-track-cue-3>text track cue</a>'s <dfn id=active-flag-was-set-when-the-script-started>active flag was set when the script started</dfn> if its
  <a href=#text-track-cue-active-flag id=text-track-api:text-track-cue-active-flag>text track cue active flag</a> was set the last time the <a id=text-track-api:event-loop-2 href=webappapis.html#event-loop>event loop</a> reached
  <a href=webappapis.html#step1>step 1</a>.</p>

  <hr>

  <p>The <dfn data-dfn-for=TextTrack id=dom-texttrack-addcue data-dfn-type=method><code>addCue(<var>cue</var>)</code></dfn> method of <code id=text-track-api:texttrack-26><a href=#texttrack>TextTrack</a></code>
  objects, when invoked, must run the following steps:</p>

  <ol><li><p>If the <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-10>text track list of cues</a> does not yet have any associated <a href=#rules-for-updating-the-text-track-rendering id=text-track-api:rules-for-updating-the-text-track-rendering-2>rules
   for updating the text track rendering</a>, then associate the <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-11>text track list of
   cues</a> with the <a href=#rules-for-updating-the-text-track-rendering id=text-track-api:rules-for-updating-the-text-track-rendering-3>rules for updating the text track rendering</a> appropriate to <var>cue</var>.</p>

   <li><p>If <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-12>text track list of cues</a>' associated <a href=#rules-for-updating-the-text-track-rendering id=text-track-api:rules-for-updating-the-text-track-rendering-4>rules for updating the text
   track rendering</a> are not the same <a href=#rules-for-updating-the-text-track-rendering id=text-track-api:rules-for-updating-the-text-track-rendering-5>rules for updating the text track rendering</a>
   as appropriate for <var>cue</var>, then throw an <a id=text-track-api:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a>
   <code id=text-track-api:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.</p>

   <li><p>If the given <var>cue</var> is in a <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-13>text track list of cues</a>, then
   remove <var>cue</var> from that <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-14>text track list of cues</a>.<li><p>Add <var>cue</var> to the <code id=text-track-api:texttrack-27><a href=#texttrack>TextTrack</a></code> object's <a href=#text-track id=text-track-api:text-track-25>text track</a>'s
   <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-15>text track list of cues</a>.</ol>

  <p>The <dfn data-dfn-for=TextTrack id=dom-texttrack-removecue data-dfn-type=method><code>removeCue(<var>cue</var>)</code></dfn> method of
  <code id=text-track-api:texttrack-28><a href=#texttrack>TextTrack</a></code> objects, when invoked, must run the following steps:</p>

  <ol><li><p>If the given <var>cue</var> is not in the <code id=text-track-api:texttrack-29><a href=#texttrack>TextTrack</a></code> object's <a href=#text-track id=text-track-api:text-track-26>text
   track</a>'s <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-16>text track list of cues</a>, then throw a
   <a id=text-track-api:notfounderror href=https://webidl.spec.whatwg.org/#notfounderror data-x-internal=notfounderror>"<code>NotFoundError</code>"</a> <code id=text-track-api:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Remove <var>cue</var> from the <code id=text-track-api:texttrack-30><a href=#texttrack>TextTrack</a></code> object's <a href=#text-track id=text-track-api:text-track-27>text track</a>'s
   <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-17>text track list of cues</a>.</ol>

  

  <div class=example>

   <p>In this example, an <code id=text-track-api:the-audio-element><a href=#the-audio-element>audio</a></code> element is used to play a specific sound-effect from a
   sound file containing many sound effects. A cue is used to pause the audio, so that it ends
   exactly at the end of the clip, even if the browser is busy running some script. If the page had
   relied on script to pause the audio, then the start of the next clip might be heard if the
   browser was not able to run the script at the exact time specified.</p>

   <pre><code class='js'><c- a>var</c-> sfx <c- o>=</c-> <c- k>new</c-> Audio<c- p>(</c-><c- t>&apos;sfx.wav&apos;</c-><c- p>);</c->
<c- a>var</c-> sounds <c- o>=</c-> sfx<c- p>.</c->addTextTrack<c- p>(</c-><c- t>&apos;metadata&apos;</c-><c- p>);</c->

<c- c1>// add sounds we care about</c->
<c- a>function</c-> addFX<c- p>(</c->start<c- p>,</c-> end<c- p>,</c-> name<c- p>)</c-> <c- p>{</c->
  <c- a>var</c-> cue <c- o>=</c-> <c- k>new</c-> VTTCue<c- p>(</c->start<c- p>,</c-> end<c- p>,</c-> <c- t>&apos;&apos;</c-><c- p>);</c->
  cue<c- p>.</c->id <c- o>=</c-> name<c- p>;</c->
  cue<c- p>.</c->pauseOnExit <c- o>=</c-> <c- kc>true</c-><c- p>;</c->
  sounds<c- p>.</c->addCue<c- p>(</c->cue<c- p>);</c->
<c- p>}</c->
addFX<c- p>(</c-><c- mf>12.783</c-><c- p>,</c-> <c- mf>13.612</c-><c- p>,</c-> <c- t>&apos;dog bark&apos;</c-><c- p>);</c->
addFX<c- p>(</c-><c- mf>13.612</c-><c- p>,</c-> <c- mf>15.091</c-><c- p>,</c-> <c- t>&apos;kitten mew&apos;</c-><c- p>);</c->

<c- a>function</c-> playSound<c- p>(</c->id<c- p>)</c-> <c- p>{</c->
  sfx<c- p>.</c->currentTime <c- o>=</c-> sounds<c- p>.</c->getCueById<c- p>(</c->id<c- p>).</c->startTime<c- p>;</c->
  sfx<c- p>.</c->play<c- p>();</c->
<c- p>}</c->

<c- c1>// play a bark as soon as we can</c->
sfx<c- p>.</c->oncanplaythrough <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c->
  playSound<c- p>(</c-><c- t>&apos;dog bark&apos;</c-><c- p>);</c->
<c- p>}</c->
<c- c1>// meow when the user tries to leave,</c->
<c- c1>// and have the browser ask them to stay</c->
window<c- p>.</c->onbeforeunload <c- o>=</c-> <c- a>function</c-> <c- p>(</c->e<c- p>)</c-> <c- p>{</c->
  playSound<c- p>(</c-><c- t>&apos;kitten mew&apos;</c-><c- p>);</c->
  e<c- p>.</c->preventDefault<c- p>();</c->
<c- p>}</c-></code></pre>

  </div>

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCueList title="The TextTrackCueList array-like object represents a dynamically updating list of TextTrackCue objects.">TextTrackCueList</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='texttrackcuelist' data-dfn-type='interface'><c- g>TextTrackCueList</c-></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-texttrackcuelist-length' id='text-track-api:dom-texttrackcuelist-length'><c- g>length</c-></a>;
  <a href='#dom-texttrackcuelist-item'><c- b>getter</c-></a> <a href='#texttrackcue' id='text-track-api:texttrackcue-3'><c- n>TextTrackCue</c-></a> (<c- b>unsigned</c-> <c- b>long</c-> <c- g>index</c->);
  <a href='#texttrackcue' id='text-track-api:texttrackcue-4'><c- n>TextTrackCue</c-></a>? <a href='#dom-texttrackcuelist-getcuebyid' id='text-track-api:dom-texttrackcuelist-getcuebyid'><c- g>getCueById</c-></a>(<c- b>DOMString</c-> <c- g>id</c->);
};</code></pre>

  <dl class=domintro><dt><code><var>cuelist</var>.<a href=#dom-texttrackcuelist-length id=dom-texttrackcuelist-length-dev>length</a></code><dd><p>Returns the number of <a href=#text-track-cue id=text-track-api:text-track-cue-4>cues</a> in the list.<dt><code><var>cuelist</var>[<var>index</var>]</code><dd>
    <p>Returns the <a href=#text-track-cue id=text-track-api:text-track-cue-5>text track cue</a> with index <var>index</var> in the list. The cues are
    sorted in <a href=#text-track-cue-order id=text-track-api:text-track-cue-order-3>text track cue order</a>.</p>
   <dt><code><var>cuelist</var>.<a href=#dom-texttrackcuelist-getcuebyid id=dom-texttrackcuelist-getcuebyid-dev>getCueById</a>(<var>id</var>)</code><dd>
    <p>Returns the first <a href=#text-track-cue id=text-track-api:text-track-cue-6>text track cue</a> (in <a href=#text-track-cue-order id=text-track-api:text-track-cue-order-4>text track cue order</a>) with
    <a href=#text-track-cue-identifier id=text-track-api:text-track-cue-identifier>text track cue identifier</a> <var>id</var>.</p>

    <p>Returns null if none of the cues have the given identifier or if the argument is the empty
    string.</p>
   </dl>

  

  <p>A <code id=text-track-api:texttrackcuelist-9><a href=#texttrackcuelist>TextTrackCueList</a></code> object represents a dynamically updating list of <a href=#text-track-cue id=text-track-api:text-track-cue-7>text track cues</a> in a given order.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCueList/length title="The length read-only property of the TextTrackCueList interface returns the number of cues in the list.">TextTrackCueList/length</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=TextTrackCueList id=dom-texttrackcuelist-length data-dfn-type=attribute><code>length</code></dfn> attribute must return the number of <a href=#text-track-cue id=text-track-api:text-track-cue-8>cues</a> in the list represented by the <code id=text-track-api:texttrackcuelist-10><a href=#texttrackcuelist>TextTrackCueList</a></code>
  object.</p>

  <p>The <a id=text-track-api:supported-property-indices-3 href=https://webidl.spec.whatwg.org/#dfn-supported-property-indices data-x-internal=supported-property-indices>supported property indices</a> of a <code id=text-track-api:texttrackcuelist-11><a href=#texttrackcuelist>TextTrackCueList</a></code> object at any
  instant are the numbers from zero to the number of <a href=#text-track-cue id=text-track-api:text-track-cue-9>cues</a> in the
  list represented by the <code id=text-track-api:texttrackcuelist-12><a href=#texttrackcuelist>TextTrackCueList</a></code> object minus one, if any. If there are no
  <a href=#text-track-cue id=text-track-api:text-track-cue-10>cues</a> in the list, there are no <a id=text-track-api:supported-property-indices-4 href=https://webidl.spec.whatwg.org/#dfn-supported-property-indices data-x-internal=supported-property-indices>supported property
  indices</a>.</p>

  <p id=dom-texttrackcuelist-item>To <a id=text-track-api:determine-the-value-of-an-indexed-property-2 href=https://webidl.spec.whatwg.org/#dfn-determine-the-value-of-an-indexed-property data-x-internal=determine-the-value-of-an-indexed-property>determine the value of an indexed property</a> for a
  given index <var>index</var>, the user agent must return the <var>index</var>th <a href=#text-track-cue id=text-track-api:text-track-cue-11>text track
  cue</a> in the list represented by the <code id=text-track-api:texttrackcuelist-13><a href=#texttrackcuelist>TextTrackCueList</a></code> object.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCueList/getCueById title="The getCueById() method of the TextTrackCueList interface returns the first VTTCue in the list represented by the TextTrackCueList object whose identifier matches the value of id.">TextTrackCueList/getCueById</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=TextTrackCueList id=dom-texttrackcuelist-getcuebyid data-dfn-type=method><code>getCueById(<var>id</var>)</code></dfn> method, when
  called with an argument other than the empty string, must return the first <a href=#text-track-cue id=text-track-api:text-track-cue-12>text track
  cue</a> in the list represented by the <code id=text-track-api:texttrackcuelist-14><a href=#texttrackcuelist>TextTrackCueList</a></code> object whose <a href=#text-track-cue-identifier id=text-track-api:text-track-cue-identifier-2>text
  track cue identifier</a> is <var>id</var>, if any, or null otherwise. If the argument is the
  empty string, then the method must return null.</p>

  

  <hr>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue title="TextTrackCue is an abstract class which is used as the basis for the various derived cue types, such as VTTCue; you will instead work with those derived types. These cues represent strings of text presented for some duration of time during the performance of a TextTrack. The cue includes the start time (the time at which the text will be displayed) and the end time (the time at which it will be removed from the display), as well as other information.">TextTrackCue</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='texttrackcue' data-dfn-type='interface'><c- g>TextTrackCue</c-></dfn> : <a id='text-track-api:eventtarget-3' href='https://dom.spec.whatwg.org/#interface-eventtarget' data-x-internal='eventtarget'><c- n>EventTarget</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a href='#texttrack' id='text-track-api:texttrack-31'><c- n>TextTrack</c-></a>? <a href='#dom-texttrackcue-track' id='text-track-api:dom-texttrackcue-track'><c- g>track</c-></a>;

  <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-texttrackcue-id' id='text-track-api:dom-texttrackcue-id'><c- g>id</c-></a>;
  <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-texttrackcue-starttime' id='text-track-api:dom-texttrackcue-starttime'><c- g>startTime</c-></a>;
  <c- b>attribute</c-> <c- b>unrestricted</c-> <c- b>double</c-> <a href='#dom-texttrackcue-endtime' id='text-track-api:dom-texttrackcue-endtime'><c- g>endTime</c-></a>;
  <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-texttrackcue-pauseonexit' id='text-track-api:dom-texttrackcue-pauseonexit'><c- g>pauseOnExit</c-></a>;

  <c- b>attribute</c-> <a id='text-track-api:eventhandler-5' href='webappapis.html#eventhandler'><c- n>EventHandler</c-></a> <a href='#handler-texttrackcue-onenter' id='text-track-api:handler-texttrackcue-onenter'><c- g>onenter</c-></a>;
  <c- b>attribute</c-> <a id='text-track-api:eventhandler-6' href='webappapis.html#eventhandler'><c- n>EventHandler</c-></a> <a href='#handler-texttrackcue-onexit' id='text-track-api:handler-texttrackcue-onexit'><c- g>onexit</c-></a>;
};</code></pre>

  <dl class=domintro><dt><code><var>cue</var>.<a href=#dom-texttrackcue-track id=dom-texttrackcue-track-dev>track</a></code><dd>
    <p>Returns the <code id=text-track-api:texttrack-32><a href=#texttrack>TextTrack</a></code> object to which this <a href=#text-track-cue id=text-track-api:text-track-cue-13>text track cue</a> belongs,
    if any, or null otherwise.</p>
   <dt><code><var>cue</var>.<a href=#dom-texttrackcue-id id=dom-texttrackcue-id-dev>id</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the <a href=#text-track-cue-identifier id=text-track-api:text-track-cue-identifier-3>text track cue identifier</a>.</p>

    <p>Can be set.</p>
   <dt><code><var>cue</var>.<a href=#dom-texttrackcue-starttime id=dom-texttrackcue-starttime-dev>startTime</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the <a href=#text-track-cue-start-time id=text-track-api:text-track-cue-start-time>text track cue start time</a>, in seconds.</p>

    <p>Can be set.</p>
   <dt><code><var>cue</var>.<a href=#dom-texttrackcue-endtime id=dom-texttrackcue-endtime-dev>endTime</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the <a href=#text-track-cue-end-time id=text-track-api:text-track-cue-end-time-2>text track cue end time</a>, in seconds.</p>

    <p>Returns positive Infinity for an <a href=#unbounded-text-track-cue id=text-track-api:unbounded-text-track-cue>unbounded text track cue</a>.</p>

    <p>Can be set.</p>
   <dt><code><var>cue</var>.<a href=#dom-texttrackcue-pauseonexit id=dom-texttrackcue-pauseonexit-dev>pauseOnExit</a> [ = <var>value</var> ]</code><dd>
    <p>Returns true if the <a href=#text-track-cue-pause-on-exit-flag id=text-track-api:text-track-cue-pause-on-exit-flag>text track cue pause-on-exit flag</a> is set, false
    otherwise.</p>

    <p>Can be set.</p>
   </dl>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue/track title="The track read-only property of the TextTrackCue interface returns the TextTrack object that this cue belongs to.">TextTrackCue/track</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=TextTrackCue id=dom-texttrackcue-track data-dfn-type=attribute><code>track</code></dfn>
  attribute, on getting, must return the <code id=text-track-api:texttrack-33><a href=#texttrack>TextTrack</a></code> object of the <a href=#text-track id=text-track-api:text-track-28>text
  track</a> in whose <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-18>list of cues</a> the <a href=#text-track-cue id=text-track-api:text-track-cue-14>text
  track cue</a> that the <code id=text-track-api:texttrackcue-5><a href=#texttrackcue>TextTrackCue</a></code> object represents finds itself, if any; or
  null otherwise.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue/id title="The id property of the TextTrackCue interface returns and sets the identifier for this cue.">TextTrackCue/id</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=TextTrackCue id=dom-texttrackcue-id data-dfn-type=attribute><code>id</code></dfn>
  attribute, on getting, must return the <a href=#text-track-cue-identifier id=text-track-api:text-track-cue-identifier-4>text track cue identifier</a> of the <a href=#text-track-cue id=text-track-api:text-track-cue-15>text
  track cue</a> that the <code id=text-track-api:texttrackcue-6><a href=#texttrackcue>TextTrackCue</a></code> object represents. On setting, the <a href=#text-track-cue-identifier id=text-track-api:text-track-cue-identifier-5>text
  track cue identifier</a> must be set to the new value.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue/startTime title="The startTime property of the TextTrackCue interface returns and sets the start time of the cue.">TextTrackCue/startTime</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=TextTrackCue id=dom-texttrackcue-starttime data-dfn-type=attribute><code>startTime</code></dfn> attribute, on getting, must return the
  <a href=#text-track-cue-start-time id=text-track-api:text-track-cue-start-time-2>text track cue start time</a> of the <a href=#text-track-cue id=text-track-api:text-track-cue-16>text track cue</a> that the
  <code id=text-track-api:texttrackcue-7><a href=#texttrackcue>TextTrackCue</a></code> object represents, in seconds. On setting, the <a href=#text-track-cue-start-time id=text-track-api:text-track-cue-start-time-3>text track cue
  start time</a> must be set to the new value, interpreted in seconds; then, if the
  <code id=text-track-api:texttrackcue-8><a href=#texttrackcue>TextTrackCue</a></code> object's <a href=#text-track-cue id=text-track-api:text-track-cue-17>text track cue</a> is in a <a href=#text-track id=text-track-api:text-track-29>text track</a>'s
  <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-19>list of cues</a>, and that <a href=#text-track id=text-track-api:text-track-30>text track</a> is in
  a <a href=#media-element id=text-track-api:media-element-11>media element</a>'s <a href=#list-of-text-tracks id=text-track-api:list-of-text-tracks-7>list of text tracks</a>, and the <a href=#media-element id=text-track-api:media-element-12>media
  element</a>'s <a href=#show-poster-flag id=text-track-api:show-poster-flag>show poster flag</a> is not set, then run the <i id=text-track-api:time-marches-on><a href=#time-marches-on>time marches on</a></i> steps for that <a href=#media-element id=text-track-api:media-element-13>media element</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue/endTime title="The endTime property of the TextTrackCue interface returns and sets the end time of the cue.">TextTrackCue/endTime</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=TextTrackCue id=dom-texttrackcue-endtime data-dfn-type=attribute><code>endTime</code></dfn> attribute, on getting, must return the
  <a href=#text-track-cue-end-time id=text-track-api:text-track-cue-end-time-3>text track cue end time</a> of the <a href=#text-track-cue id=text-track-api:text-track-cue-18>text track cue</a> that the
  <code id=text-track-api:texttrackcue-9><a href=#texttrackcue>TextTrackCue</a></code> object represents, in seconds or positive Infinity. On setting, if the
  new value is negative Infinity or a Not-a-Number (NaN) value, then throw a <a href=https://tc39.es/ecma262/#sec-native-error-types-used-in-this-standard-typeerror>TypeError
  </a> exception. Otherwise, the <a href=#text-track-cue-end-time id=text-track-api:text-track-cue-end-time-4>text track cue end time</a> must be set to the new value.
  Then, if the <code id=text-track-api:texttrackcue-10><a href=#texttrackcue>TextTrackCue</a></code> object's <a href=#text-track-cue id=text-track-api:text-track-cue-19>text track cue</a> is in a <a href=#text-track id=text-track-api:text-track-31>text
  track</a>'s <a href=#text-track-list-of-cues id=text-track-api:text-track-list-of-cues-20>list of cues</a>, and that <a href=#text-track id=text-track-api:text-track-32>text
  track</a> is in a <a href=#media-element id=text-track-api:media-element-14>media element</a>'s <a href=#list-of-text-tracks id=text-track-api:list-of-text-tracks-8>list of text tracks</a>, and the
  <a href=#media-element id=text-track-api:media-element-15>media element</a>'s <a href=#show-poster-flag id=text-track-api:show-poster-flag-2>show poster flag</a> is not set, then run the <i id=text-track-api:time-marches-on-2><a href=#time-marches-on>time marches on</a></i> steps for that <a href=#media-element id=text-track-api:media-element-16>media element</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue/pauseOnExit title="The pauseOnExit property of the TextTrackCue interface returns or sets the flag indicating whether playback of the media should pause when the end of the range to which this cue applies is reached.">TextTrackCue/pauseOnExit</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=TextTrackCue id=dom-texttrackcue-pauseonexit data-dfn-type=attribute><code>pauseOnExit</code></dfn> attribute, on getting, must return
  true if the <a href=#text-track-cue-pause-on-exit-flag id=text-track-api:text-track-cue-pause-on-exit-flag-2>text track cue pause-on-exit flag</a> of the <a href=#text-track-cue id=text-track-api:text-track-cue-20>text track cue</a> that
  the <code id=text-track-api:texttrackcue-11><a href=#texttrackcue>TextTrackCue</a></code> object represents is set; or false otherwise. On setting, the
  <a href=#text-track-cue-pause-on-exit-flag id=text-track-api:text-track-cue-pause-on-exit-flag-3>text track cue pause-on-exit flag</a> must be set if the new value is true, and must be
  unset otherwise.</p>


  <h6 id=cue-events><span class=secno>4.8.11.11.6</span> Event handlers for objects of the text track APIs<a href=#cue-events class=self-link></a></h6>

  <p>The following are the <a id=cue-events:event-handlers href=webappapis.html#event-handlers>event handlers</a> that (and their corresponding <a href=webappapis.html#event-handler-event-type id=cue-events:event-handler-event-type>event handler event types</a>) that must
  be supported, as <a id=cue-events:event-handler-idl-attributes href=webappapis.html#event-handler-idl-attributes>event handler IDL attributes</a>, by all objects implementing the
  <code id=cue-events:texttracklist><a href=#texttracklist>TextTrackList</a></code> interface:</p>

  <table><thead><tr><th><a href=webappapis.html#event-handlers id=cue-events:event-handlers-2>Event handler</a> <th><a id=cue-events:event-handler-event-type-2 href=webappapis.html#event-handler-event-type>Event handler event type</a>
   <tbody><tr><td><dfn data-dfn-for=TextTrackList id=handler-texttracklist-onchange data-dfn-type=attribute><code>onchange</code></dfn> <td> <code id=cue-events:event-media-change><a href=#event-media-change>change</a></code>
    <tr><td><dfn data-dfn-for=TextTrackList id=handler-texttracklist-onaddtrack data-dfn-type=attribute><code>onaddtrack</code></dfn> <td> <code id=cue-events:event-media-addtrack><a href=#event-media-addtrack>addtrack</a></code>
    <tr><td><dfn data-dfn-for=TextTrackList id=handler-texttracklist-onremovetrack data-dfn-type=attribute><code>onremovetrack</code></dfn> <td> <code id=cue-events:event-media-removetrack><a href=#event-media-removetrack>removetrack</a></code>
  </table>

  <p>The following are the <a id=cue-events:event-handlers-3 href=webappapis.html#event-handlers>event handlers</a> that (and their corresponding <a href=webappapis.html#event-handler-event-type id=cue-events:event-handler-event-type-3>event handler event types</a>) that must
  be supported, as <a id=cue-events:event-handler-idl-attributes-2 href=webappapis.html#event-handler-idl-attributes>event handler IDL attributes</a>, by all objects implementing the
  <code id=cue-events:texttrack><a href=#texttrack>TextTrack</a></code> interface:</p>

  <table><thead><tr><th><a href=webappapis.html#event-handlers id=cue-events:event-handlers-4>Event handler</a> <th><a id=cue-events:event-handler-event-type-4 href=webappapis.html#event-handler-event-type>Event handler event type</a>
   <tbody><tr><td><dfn data-dfn-for=TextTrack id=handler-texttrack-oncuechange data-dfn-type=attribute><code>oncuechange</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/cuechange_event title="The cuechange event fires when a TextTrack has changed the currently displaying cues. The event is fired on both the TextTrack and the HTMLTrackElement in which it's being presented, if any.">TextTrack/cuechange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=cue-events:event-media-cuechange><a href=#event-media-cuechange>cuechange</a></code>
  </table>

  <p>The following are the <a id=cue-events:event-handlers-5 href=webappapis.html#event-handlers>event handlers</a> (and their corresponding <a href=webappapis.html#event-handler-event-type id=cue-events:event-handler-event-type-5>event handler event types</a>) that must
  be supported, as <a id=cue-events:event-handler-idl-attributes-3 href=webappapis.html#event-handler-idl-attributes>event handler IDL attributes</a>, by all objects implementing the
  <code id=cue-events:texttrackcue><a href=#texttrackcue>TextTrackCue</a></code> interface:</p>

  <table><thead><tr><th><a href=webappapis.html#event-handlers id=cue-events:event-handlers-6>Event handler</a> <th><a id=cue-events:event-handler-event-type-6 href=webappapis.html#event-handler-event-type>Event handler event type</a>
   <tbody><tr><td><dfn data-dfn-for=TextTrackCue id=handler-texttrackcue-onenter data-dfn-type=attribute><code>onenter</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue/enter_event title="The enter event fires when a cue becomes active. In the case of subtitles or a caption this is when it displays over the media.">TextTrackCue/enter_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=cue-events:event-media-enter><a href=#event-media-enter>enter</a></code>
    <tr><td><dfn data-dfn-for=TextTrackCue id=handler-texttrackcue-onexit data-dfn-type=attribute><code>onexit</code></dfn> <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue/exit_event title="The exit event fires when a cue stops being active.">TextTrackCue/exit_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td> <code id=cue-events:event-media-exit><a href=#event-media-exit>exit</a></code>
  </table>

  



  <h6 id=best-practices-for-metadata-text-tracks><span class=secno>4.8.11.11.7</span> Best practices for metadata text tracks<a href=#best-practices-for-metadata-text-tracks class=self-link></a></h6>

  <p><i>This section is non-normative.</i></p>

  <p>Text tracks can be used for storing data relating to the media data, for interactive or
  augmented views.</p>

  <p>For example, a page showing a sports broadcast could include information about the current
  score. Suppose a robotics competition was being streamed live. The image could be overlaid with
  the scores, as follows:</p>

  <p><iframe src="data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0A%20body%2C%20html%20%7B%20margin%3A%200%3B%20padding%3A%200%3B%20overflow%3A%20hidden%3B%20%7D%0A%20div%20%7B%20width%3A%20600px%3B%20height%3A%20400px%3B%20position%3A%20relative%3B%20%7D%0A%20p%20%7B%20position%3A%20absolute%3B%20top%3A%200%3B%20margin%3A%200.25em%3B%20font%3A%20small-caps%20900%202em%20sans-serif%3B%20text-shadow%3A%20white%200%200%204px%3B%20%7D%0A%20span%20%7B%20display%3A%20block%3B%20%7D%0A%20.left%20%7B%20color%3A%20red%3B%20left%3A%200%3B%20text-align%3A%20left%3B%20%7D%0A%20.right%20%7B%20color%3A%20blue%3B%20right%3A%200%3B%20text-align%3A%20right%3B%20%7D%0A%20.middle%20%7B%20color%3A%20white%3B%20top%3A%20auto%3B%20bottom%3A%200%3B%20left%3A%200%3B%20right%3A%200%3B%20text-align%3A%20center%3B%20text-shadow%3A%20black%200%200%204px%3B%20%7D%0A%20.middle%20span%20%7B%20display%3A%20inline-block%3B%20margin%3A%200%201em%3B%20font-size%3A%200.75em%3B%20text-transform%3A%20uppercase%3B%20%7D%0A%3C%2Fstyle%3E%0A%3Cdiv%3E%0A%20%3Cimg%20src%3D%22https%3A%2F%2Fhtml.spec.whatwg.org%2Fimages%2Frobots.jpeg%22%3E%0A%20%3Cp%20class%3D%22score%20left%22%3E%3Cspan%3ERed%20Alliance%3C%2Fspan%3E%20%3Cspan%3E78%3C%2Fspan%3E%3C%2Fp%3E%0A%20%3Cp%20class%3D%22score%20right%22%3E%3Cspan%3EBlue%20Alliance%3C%2Fspan%3E%20%3Cspan%3E66%3C%2Fspan%3E%3C%2Fp%3E%0A%20%3Cp%20class%3D%22score%20middle%22%3E%3Cspan%3EQual%20Match%2037%3C%2Fspan%3E%20%3Cspan%3EFriday%2014%3A21%3C%2Fspan%3E%0A%3C%2Fdiv%3E" width=600 height=400></iframe>

  <p>In order to make the score display render correctly whenever the user seeks to an arbitrary
  point in the video, the metadata text track cues need to be as long as is appropriate for the
  score. For example, in the frame above, there would be maybe one cue that lasts the length of the
  match that gives the match number, one cue that lasts until the blue alliance's score changes, and
  one cue that lasts until the red alliance's score changes. If the video is just a stream of the
  live event, the time in the bottom right would presumably be automatically derived from the
  current video time, rather than based on a cue. However, if the video was just the highlights,
  then that might be given in cues also.</p>

  <p>The following shows what fragments of this could look like in a WebVTT file:</p>

  <pre>WEBVTT

...

05:10:00.000 --> 05:12:15.000
matchtype:qual
matchnumber:37

...

05:11:02.251 --> 05:11:17.198
red:78

05:11:03.672 --> 05:11:54.198
blue:66

05:11:17.198 --> 05:11:25.912
red:80

05:11:25.912 --> 05:11:26.522
red:83

05:11:26.522 --> 05:11:26.982
red:86

05:11:26.982 --> 05:11:27.499
red:89

...</pre>

  <p>The key here is to notice that the information is given in cues that span the length of time to
  which the relevant event applies. If, instead, the scores were given as zero-length (or very
  brief, nearly zero-length) cues when the score changes, for example saying "red+2" at
  05:11:17.198, "red+3" at 05:11:25.912, etc, problems arise: primarily, seeking is much harder to
  implement, as the script has to walk the entire list of cues to make sure that no notifications
  have been missed; but also, if the cues are short it's possible the script will never see that
  they are active unless it listens to them specifically.</p>

  <p>When using cues in this manner, authors are encouraged to use the <code id=best-practices-for-metadata-text-tracks:event-media-cuechange><a href=#event-media-cuechange>cuechange</a></code> event to update the current annotations. (In
  particular, using the <code id=best-practices-for-metadata-text-tracks:event-media-timeupdate><a href=#event-media-timeupdate>timeupdate</a></code> event would be less
  appropriate as it would require doing work even when the cues haven't changed, and, more
  importantly, would introduce a higher latency between when the metadata cues become active and
  when the display is updated, since <code id=best-practices-for-metadata-text-tracks:event-media-timeupdate-2><a href=#event-media-timeupdate>timeupdate</a></code> events
  are rate-limited.)</p>



  <h5 id=identifying-a-track-kind-through-a-url><span class=secno>4.8.11.12</span> Identifying a track kind through a URL<a href=#identifying-a-track-kind-through-a-url class=self-link></a></h5>

  <p>Other specifications or formats that need a <a id=identifying-a-track-kind-through-a-url:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> to identify the return values of
  the <code id=identifying-a-track-kind-through-a-url:audiotrack><a href=#audiotrack>AudioTrack</a></code> <code id=identifying-a-track-kind-through-a-url:dom-audiotrack-kind><a href=#dom-audiotrack-kind>kind</a></code> or
  <code id=identifying-a-track-kind-through-a-url:videotrack><a href=#videotrack>VideoTrack</a></code> <code id=identifying-a-track-kind-through-a-url:dom-videotrack-kind><a href=#dom-videotrack-kind>kind</a></code> IDL attributes, or identify
  the <a href=#text-track-kind id=identifying-a-track-kind-through-a-url:text-track-kind>kind of text track</a>, must use the
  <code id=identifying-a-track-kind-through-a-url:about:html-kind><a href=urls-and-fetching.html#about:html-kind>about:html-kind</a></code> <a id=identifying-a-track-kind-through-a-url:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>.</p>



  <h5 id=user-interface><span class=secno>4.8.11.13</span> User interface<a href=#user-interface class=self-link></a></h5>

  <p>The <dfn data-dfn-for=audio,video id=attr-media-controls data-dfn-type=element-attr><code>controls</code></dfn> attribute is a <a id=user-interface:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>.
  If present, it indicates that the author has not provided a scripted controller and would like the
  user agent to provide its own set of controls.</p>

  

  <p>If the attribute is present, or if <a href=webappapis.html#concept-n-noscript id=user-interface:concept-n-noscript>scripting is
  disabled</a> for the <a href=#media-element id=user-interface:media-element>media element</a>, then the user agent should <dfn id=expose-a-user-interface-to-the-user>expose a user
  interface to the user</dfn>. This user interface should include features to begin playback, pause
  playback, seek to an arbitrary position in the content (if the content supports arbitrary
  seeking), change the volume, change the display of closed captions or embedded sign-language
  tracks, select different audio tracks or turn on audio descriptions, and show the media content in
  manners more suitable to the user (e.g. fullscreen video or in an independent resizable window).
  Other controls may also be made available.</p>

  <p>Even when the attribute is absent, however, user agents may provide controls to affect playback
  of the media resource (e.g. play, pause, seeking, track selection, and volume controls), but such
  features should not interfere with the page's normal rendering. For example, such features could
  be exposed in the <a href=#media-element id=user-interface:media-element-2>media element</a>'s context menu, platform media keys, or a remote
  control. The user agent may implement this simply by <a href=#expose-a-user-interface-to-the-user id=user-interface:expose-a-user-interface-to-the-user>exposing a user interface to the user</a> as described above (as if the <code id=user-interface:attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute was present).</p>

  <p>If the user agent <a href=#expose-a-user-interface-to-the-user id=user-interface:expose-a-user-interface-to-the-user-2>exposes a user interface to
  the user</a> by displaying controls over the <a href=#media-element id=user-interface:media-element-3>media element</a>, then the user agent
  should suppress any user interaction events while the user agent is interacting with this
  interface. (For example, if the user clicks on a video's playback control, <code id=user-interface:event-mousedown><a data-x-internal=event-mousedown href=https://w3c.github.io/uievents/#event-type-mousedown>mousedown</a></code> events and so forth would not simultaneously be fired at
  elements on the page.)</p>

  <p>Where possible (specifically, for starting, stopping, pausing, and unpausing playback, for
  seeking, for changing the rate of playback, for fast-forwarding or rewinding, for listing,
  enabling, and disabling text tracks, and for muting or changing the volume of the audio), user
  interface features exposed by the user agent must be implemented in terms of the DOM API described
  above, so that, e.g., all the same events fire.</p>

  <p>Features such as fast-forward or rewind must be implemented by only changing the <code>playbackRate</code> attribute (and not the <code>defaultPlaybackRate</code>
  attribute).</p>

  <p>Seeking must be implemented in terms of <a href=#dom-media-seek id=user-interface:dom-media-seek>seeking</a> to the
  requested position in the <a href=#media-element id=user-interface:media-element-4>media element</a>'s <a href=#media-timeline id=user-interface:media-timeline>media timeline</a>. For media
  resources where seeking to an arbitrary position would be slow, user agents are encouraged to use
  the <i>approximate-for-speed</i> flag when seeking in response to the user manipulating an
  approximate position interface such as a seek bar.</p>

  <hr>

  

  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-media-volume id=dom-media-volume-dev>volume</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume title="The HTMLMediaElement.volume property sets the volume at which the media will be played.">HTMLMediaElement/volume</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span title="Partial implementation.">🔰 3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the current playback volume, as a number in the range 0.0 to 1.0, where 0.0 is the
    quietest and 1.0 the loudest.</p>

    <p>Can be set, to change the volume.</p>

    <p>Throws an <a id=user-interface:indexsizeerror href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=user-interface:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the new
    value is not in the range 0.0 .. 1.0.</p>
   <dt><code><var>media</var>.<a href=#dom-media-muted id=dom-media-muted-dev>muted</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted title="The HTMLMediaElement.muted property indicates whether the media element is muted.">HTMLMediaElement/muted</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns true if audio is muted, overriding the <code id=user-interface:dom-media-volume><a href=#dom-media-volume>volume</a></code>
    attribute, and false if the <code id=user-interface:dom-media-volume-2><a href=#dom-media-volume>volume</a></code> attribute is being
    honored.</p>

    <p>Can be set, to change whether the audio is muted or not.</p>
   </dl>

  

  <p>A <a href=#media-element id=user-interface:media-element-5>media element</a> has a <dfn id=concept-media-volume>playback volume</dfn>, which is a fraction in the range 0.0 (silent) to 1.0 (loudest).
  Initially, the volume should be 1.0, but user agents may remember the last set value across
  sessions, on a per-site basis or otherwise, so the volume may start at other values.</p>

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-volume data-dfn-type=attribute><code>volume</code></dfn>
  IDL attribute must return the <a href=#concept-media-volume id=user-interface:concept-media-volume>playback volume</a> of any
  audio portions of the <a href=#media-element id=user-interface:media-element-6>media element</a>. On setting, if the new value is in the range 0.0
  to 1.0 inclusive, the <a href=#media-element id=user-interface:media-element-7>media element</a>'s <a href=#concept-media-volume id=user-interface:concept-media-volume-2>playback
  volume</a> must be set to the new value. If the new value is outside the range 0.0 to 1.0
  inclusive, then, on setting, an <a id=user-interface:indexsizeerror-2 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a>
  <code id=user-interface:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> must be thrown instead.</p>

  <p>A <a href=#media-element id=user-interface:media-element-8>media element</a> can also be <dfn data-dfn-for="media element" id=concept-media-muted data-export="">muted</dfn>. If anything is muting the element, then it is muted. (For example, when the
  <a href=#direction-of-playback id=user-interface:direction-of-playback>direction of playback</a> is backwards, the element is muted.)</p>

  <p>The <dfn data-dfn-for=HTMLMediaElement id=dom-media-muted data-dfn-type=attribute><code>muted</code></dfn> IDL
  attribute must return the value to which it was last set. When a <a href=#media-element id=user-interface:media-element-9>media element</a> is
  created, if the element has a <code id=user-interface:attr-media-muted><a href=#attr-media-muted>muted</a></code> content attribute
  specified, then the <code id=user-interface:dom-media-muted><a href=#dom-media-muted>muted</a></code> IDL attribute should be set to
  true; otherwise, the user agents may set the value to the user's preferred value (e.g. remembering
  the last set value across sessions, on a per-site basis or otherwise). While the <code id=user-interface:dom-media-muted-2><a href=#dom-media-muted>muted</a></code> IDL attribute is set to true, the <a href=#media-element id=user-interface:media-element-10>media element</a>
  must be <a href=#concept-media-muted id=user-interface:concept-media-muted>muted</a>.</p>

  <p>Whenever either of the values that would be returned by the <code id=user-interface:dom-media-volume-3><a href=#dom-media-volume>volume</a></code> and <code id=user-interface:dom-media-muted-3><a href=#dom-media-muted>muted</a></code> IDL
  attributes change, the user agent must <a href=#queue-a-media-element-task id=user-interface:queue-a-media-element-task>queue a media element task</a> given the
  <a href=#media-element id=user-interface:media-element-11>media element</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=user-interface:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=user-interface:event-media-volumechange><a href=#event-media-volumechange>volumechange</a></code> at the <a href=#media-element id=user-interface:media-element-12>media element</a>. Then, if
  the <a href=#media-element id=user-interface:media-element-13>media element</a> is not <a href=#allowed-to-play id=user-interface:allowed-to-play>allowed to play</a>, the user agent must run the
  <a href=#internal-pause-steps id=user-interface:internal-pause-steps>internal pause steps</a> for the <a href=#media-element id=user-interface:media-element-14>media element</a>.</p>

  <p>A user agent has an associated <dfn id=volume-locked>volume locked</dfn> (a boolean). Its value is
  <a id=user-interface:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> and determines whether the <a href=#concept-media-volume id=user-interface:concept-media-volume-3>playback volume</a> takes effect.</p>

  <p>An element's <dfn data-dfn-for=HTMLMediaElement id=effective-media-volume data-export="">effective media volume</dfn> is determined as
  follows:</p>

  <ol><li><p>If the user has indicated that the user agent is to override the volume of the element,
   then return the volume desired by the user.<li><p>If the user agent's <a href=#volume-locked id=user-interface:volume-locked>volume locked</a> is true, then return the system
   volume.<li><p>If the element's audio output is <a href=#concept-media-muted id=user-interface:concept-media-muted-2>muted</a>, then
   return zero.<li><p>Let <var>volume</var> be the <a href=#concept-media-volume id=user-interface:concept-media-volume-4>playback
   volume</a> of the audio portions of the <a href=#media-element id=user-interface:media-element-15>media element</a>, in range 0.0 (silent) to
   1.0 (loudest).<li><p>Return <var>volume</var>, interpreted relative to the range 0.0 to 1.0, with 0.0 being
   silent, and 1.0 being the loudest setting, values in between increasing in loudness. The range
   need not be linear. The loudest setting may be lower than the system's loudest possible setting;
   for example the user could have set a maximum volume.</ol>

  

  <p>The <dfn data-dfn-for=audio,video id=attr-media-muted data-dfn-type=element-attr><code>muted</code></dfn>
  content attribute on <a href=#media-element id=user-interface:media-element-16>media elements</a> is a <a id=user-interface:boolean-attribute-2 href=common-microsyntaxes.html#boolean-attribute>boolean
  attribute</a> that controls the default state of the audio output of the <a href=#media-resource id=user-interface:media-resource>media
  resource</a>, potentially overriding user preferences.</p>

  <p class=note>This attribute has no dynamic effect (it only controls the default state of the
  element).</p>

  <div class=example>

   <p>This video (an advertisement) autoplays, but to avoid annoying users, it does so without
   sound, and allows the user to turn the sound on. The user agent can pause the video if it's
   unmuted without a user interaction.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>video</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;adverts.cgi?kind=video&quot;</c-> <c- e>controls</c-> <c- e>autoplay</c-> <c- e>loop</c-> <c- e>muted</c-><c- p>&gt;&lt;/</c-><c- f>video</c-><c- p>&gt;</c-></code></pre>

  </div>




  <h5 id=time-ranges><span class=secno>4.8.11.14</span> Time ranges<a href=#time-ranges class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges title="When loading a media resource for use by an <audio> or <video> element, the TimeRanges interface is used for representing the time ranges of the media resource that have been buffered, the time ranges that have been played, and the time ranges that are seekable.">TimeRanges</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <p>Objects implementing the <code id=time-ranges:timeranges><a href=#timeranges>TimeRanges</a></code> interface
  represent a list of ranges (periods) of time.</p>

  <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='timeranges' data-dfn-type='interface'><c- g>TimeRanges</c-></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-timeranges-length' id='time-ranges:dom-timeranges-length'><c- g>length</c-></a>;
  <c- b>double</c-> <a href='#dom-timeranges-start' id='time-ranges:dom-timeranges-start'><c- g>start</c-></a>(<c- b>unsigned</c-> <c- b>long</c-> <c- g>index</c->);
  <c- b>double</c-> <a href='#dom-timeranges-end' id='time-ranges:dom-timeranges-end'><c- g>end</c-></a>(<c- b>unsigned</c-> <c- b>long</c-> <c- g>index</c->);
};</code></pre>

  <dl class=domintro><dt><code><var>media</var>.<a href=#dom-timeranges-length id=dom-timeranges-length-dev>length</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges/length title="The TimeRanges.length read-only property returns the number of ranges in the object.">TimeRanges/length</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Returns the number of ranges in the object.<dt><code><var>time</var> = <var>media</var>.<a href=#dom-timeranges-start id=dom-timeranges-start-dev>start</a>(<var>index</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges/start title="The start() method of the TimeRanges interface returns the time offset at which a specified time range begins.">TimeRanges/start</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the time for the start of the range with the given index.</p>

    <p>Throws an <a id=time-ranges:indexsizeerror href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=time-ranges:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the index
    is out of range.</p>
   <dt><code><var>time</var> = <var>media</var>.<a href=#dom-timeranges-end id=dom-timeranges-end-dev>end</a>(<var>index</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges/end title="The end() method of the TimeRanges interface returns the time offset at which a specified time range ends.">TimeRanges/end</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the time for the end of the range with the given index.</p>

    <p>Throws an <a id=time-ranges:indexsizeerror-2 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=time-ranges:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the index
    is out of range.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=TimeRanges id=dom-timeranges-length data-dfn-type=attribute><code>length</code></dfn>
  IDL attribute must return the number of ranges represented by the object.</p>

  <p>The <dfn data-dfn-for=TimeRanges id=dom-timeranges-start data-dfn-type=method><code>start(<var>index</var>)</code></dfn> method must return the position
  of the start of the <var>index</var>th range represented by the object, in seconds measured from
  the start of the timeline that the object covers.</p>

  <p>The <dfn data-dfn-for=TimeRanges id=dom-timeranges-end data-dfn-type=method><code>end(<var>index</var>)</code></dfn> method must return the position of
  the end of the <var>index</var>th range represented by the object, in seconds measured from the
  start of the timeline that the object covers.</p>

  <p>These methods must throw <a id=time-ranges:indexsizeerror-3 href=https://webidl.spec.whatwg.org/#indexsizeerror data-x-internal=indexsizeerror>"<code>IndexSizeError</code>"</a> <code id=time-ranges:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>s
  if called with an <var>index</var> argument greater than or equal to the number of ranges
  represented by the object.</p>

  <p>When a <code id=time-ranges:timeranges-2><a href=#timeranges>TimeRanges</a></code> object is said to be a <dfn id=normalised-timeranges-object data-export="">normalized <code>TimeRanges</code> object</dfn>,
  the ranges it represents must obey the following criteria:</p>

  <ul><li>The start of a range must be greater than the end of all earlier ranges.<li>The start of a range must be less than or equal to the end of that same range.</ul>

  <p>In other words, the ranges in such an object are ordered, don't overlap, and don't touch
  (adjacent ranges are folded into one bigger range). A range can be empty (referencing just a
  single moment in time), e.g. to indicate that only one frame is currently buffered in the case
  that the user agent has discarded the entire <a href=#media-resource id=time-ranges:media-resource>media resource</a> except for the current
  frame, when a <a href=#media-element id=time-ranges:media-element>media element</a> is paused.</p>

  <p>Ranges in a <code id=time-ranges:timeranges-3><a href=#timeranges>TimeRanges</a></code> object must be inclusive.</p>

  <p class=example>Thus, the end of a range would be equal to the start of a following adjacent
  (touching but not overlapping) range. Similarly, a range covering a whole timeline anchored at
  zero would have a start equal to zero and an end equal to the duration of the timeline.</p>

  <p>The timelines used by the objects returned by the <code id=time-ranges:dom-media-buffered><a href=#dom-media-buffered>buffered</a></code>, <code id=time-ranges:dom-media-seekable><a href=#dom-media-seekable>seekable</a></code>, and
  <code id=time-ranges:dom-media-played><a href=#dom-media-played>played</a></code> IDL attributes of <a href=#media-element id=time-ranges:media-element-2>media
  elements</a> must be that element's <a href=#media-timeline id=time-ranges:media-timeline>media timeline</a>.</p>

  


  <h5 id=the-trackevent-interface><span class=secno>4.8.11.15</span> The <code id=the-trackevent-interface:trackevent><a href=#trackevent>TrackEvent</a></code> interface<a href=#the-trackevent-interface class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TrackEvent title="The TrackEvent interface, which is part of the HTML DOM specification, is used for events which represent changes to a set of available tracks on an HTML media element; these events are addtrack and removetrack.">TrackEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>27+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>11</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='trackevent' data-dfn-type='interface'><c- g>TrackEvent</c-></dfn> : <a id='the-trackevent-interface:event' href='https://dom.spec.whatwg.org/#interface-event' data-x-internal='event'><c- n>Event</c-></a> {
  <c- g>constructor</c->(<c- b>DOMString</c-> <c- g>type</c->, <c- b>optional</c-> <a href='#trackeventinit' id='the-trackevent-interface:trackeventinit'><c- n>TrackEventInit</c-></a> <c- g>eventInitDict</c-> = {});

  <c- b>readonly</c-> <c- b>attribute</c-> (<a href='#videotrack' id='the-trackevent-interface:videotrack'><c- n>VideoTrack</c-></a> <c- b>or</c-> <a href='#audiotrack' id='the-trackevent-interface:audiotrack'><c- n>AudioTrack</c-></a> <c- b>or</c-> <a href='#texttrack' id='the-trackevent-interface:texttrack'><c- n>TextTrack</c-></a>)? <a href='#dom-trackevent-track' id='the-trackevent-interface:dom-trackevent-track'><c- g>track</c-></a>;
};

<c- b>dictionary</c-> <dfn id='trackeventinit' data-dfn-type='dictionary'><c- g>TrackEventInit</c-></dfn> : <a id='the-trackevent-interface:eventinit' href='https://dom.spec.whatwg.org/#dictdef-eventinit' data-x-internal='eventinit'><c- n>EventInit</c-></a> {
  (<a href='#videotrack' id='the-trackevent-interface:videotrack-2'><c- n>VideoTrack</c-></a> <c- b>or</c-> <a href='#audiotrack' id='the-trackevent-interface:audiotrack-2'><c- n>AudioTrack</c-></a> <c- b>or</c-> <a href='#texttrack' id='the-trackevent-interface:texttrack-2'><c- n>TextTrack</c-></a>)? <c- g>track</c-> = <c- b>null</c->;
};</code></pre>

  <dl class=domintro><dt><code><var>event</var>.<a href=#dom-trackevent-track id=dom-trackevent-track-dev>track</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TrackEvent/track title="The read-only track property of the TrackEvent interface specifies the media track object to which the event applies.">TrackEvent/track</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>27+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>11</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the track object (<code id=the-trackevent-interface:texttrack-3><a href=#texttrack>TextTrack</a></code>, <code id=the-trackevent-interface:audiotrack-3><a href=#audiotrack>AudioTrack</a></code>, or
    <code id=the-trackevent-interface:videotrack-3><a href=#videotrack>VideoTrack</a></code>) to which the event relates.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=TrackEvent id=dom-trackevent-track data-dfn-type=attribute><code>track</code></dfn>
  attribute must return the value it was initialized to. It represents the context information for
  the event.</p>

  



  <h5 id=mediaevents><span class=secno>4.8.11.16</span> Events summary<a href=#mediaevents class=self-link></a></h5>

  <p><i>This section is non-normative.</i></p>

  <p>The following events fire on <a href=#media-element id=mediaevents:media-element>media elements</a> as part of the
  processing model described above:</p>

  <table><thead><tr><th>Event name
     <th>Interface
     <th>Fired when...
     <th>Preconditions

   <tbody><tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-loadstart data-dfn-type=event><code>loadstart</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadstart_event title="The loadstart event is fired when the browser has started to load a resource.">HTMLMediaElement/loadstart_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td><code id=mediaevents:event><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent begins looking for <a href=#media-data id=mediaevents:media-data>media data</a>, as part of the <a href=#concept-media-load-algorithm id=mediaevents:concept-media-load-algorithm>resource selection algorithm</a>.

     <td><code id=mediaevents:dom-media-networkstate><a href=#dom-media-networkstate>networkState</a></code> equals <code id=mediaevents:dom-media-network_loading><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-progress data-dfn-type=event><code>progress</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/progress_event title="The progress event is fired periodically as the browser loads a resource.">HTMLMediaElement/progress_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td><code id=mediaevents:event-2><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent is fetching <a href=#media-data id=mediaevents:media-data-2>media data</a>.

     <td><code id=mediaevents:dom-media-networkstate-2><a href=#dom-media-networkstate>networkState</a></code> equals <code id=mediaevents:dom-media-network_loading-2><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-suspend data-dfn-type=event><code>suspend</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event title="The suspend event is fired when media data loading has been suspended.">HTMLMediaElement/suspend_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-3><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent is intentionally not currently fetching <a href=#media-data id=mediaevents:media-data-3>media data</a>.

     <td><code id=mediaevents:dom-media-networkstate-3><a href=#dom-media-networkstate>networkState</a></code> equals <code id=mediaevents:dom-media-network_idle><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-abort data-dfn-type=event><code>abort</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/abort_event title="The abort event is fired when the resource was not fully loaded, but not as the result of an error.">HTMLMediaElement/abort_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>9+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td><code id=mediaevents:event-4><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent stops fetching the <a href=#media-data id=mediaevents:media-data-4>media data</a> before it is completely
     downloaded, but not due to an error.

     <td><code id=mediaevents:dom-media-error><a href=#dom-media-error>error</a></code> is an object with the code <code id=mediaevents:dom-mediaerror-media_err_aborted><a href=#dom-mediaerror-media_err_aborted>MEDIA_ERR_ABORTED</a></code>. <code id=mediaevents:dom-media-networkstate-4><a href=#dom-media-networkstate>networkState</a></code> equals either <code id=mediaevents:dom-media-network_empty><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> or <code id=mediaevents:dom-media-network_idle-2><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>, depending on when the download was aborted.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-error data-dfn-type=event><code>error</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event title="The error event is fired when the resource could not be loaded due to an error (for example, a network connectivity problem).">HTMLMediaElement/error_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>11.6+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><td><code id=mediaevents:event-5><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>An error occurs while fetching the <a href=#media-data id=mediaevents:media-data-5>media data</a> or the type of the resource
     is not a supported media format.

     <td><code id=mediaevents:dom-media-error-2><a href=#dom-media-error>error</a></code> is an object with the code <code id=mediaevents:dom-mediaerror-media_err_network><a href=#dom-mediaerror-media_err_network>MEDIA_ERR_NETWORK</a></code> or higher. <code id=mediaevents:dom-media-networkstate-5><a href=#dom-media-networkstate>networkState</a></code> equals either <code id=mediaevents:dom-media-network_empty-2><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> or <code id=mediaevents:dom-media-network_idle-3><a href=#dom-media-network_idle>NETWORK_IDLE</a></code>, depending on when the download was aborted.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-emptied data-dfn-type=event><code>emptied</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event title="The emptied event is fired when the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.">HTMLMediaElement/emptied_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-6><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>A <a href=#media-element id=mediaevents:media-element-2>media element</a> whose <code id=mediaevents:dom-media-networkstate-6><a href=#dom-media-networkstate>networkState</a></code>
     was previously not in the <code id=mediaevents:dom-media-network_empty-3><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code> state has
     just switched to that state (either because of a fatal error during load that's about to be
     reported, or because the <code id=mediaevents:dom-media-load><a href=#dom-media-load>load()</a></code> method was invoked while
     the <a href=#concept-media-load-algorithm id=mediaevents:concept-media-load-algorithm-2>resource selection algorithm</a> was already
     running).

     <td><code id=mediaevents:dom-media-networkstate-7><a href=#dom-media-networkstate>networkState</a></code> is <code id=mediaevents:dom-media-network_empty-4><a href=#dom-media-network_empty>NETWORK_EMPTY</a></code>; all the IDL attributes are in their
     initial states.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-stalled data-dfn-type=event><code>stalled</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/stalled_event title="The stalled event is fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.">HTMLMediaElement/stalled_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-7><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent is trying to fetch <a href=#media-data id=mediaevents:media-data-6>media data</a>, but data is unexpectedly not
     forthcoming.

     <td><code id=mediaevents:dom-media-networkstate-8><a href=#dom-media-networkstate>networkState</a></code> is <code id=mediaevents:dom-media-network_loading-3><a href=#dom-media-network_loading>NETWORK_LOADING</a></code>.

   <tbody><tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-loadedmetadata data-dfn-type=event><code>loadedmetadata</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event title="The loadedmetadata event is fired when the metadata has been loaded.">HTMLMediaElement/loadedmetadata_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-8><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent has just determined the duration and dimensions of the <a href=#media-resource id=mediaevents:media-resource>media
     resource</a> and <a href=#the-text-tracks-are-ready id=mediaevents:the-text-tracks-are-ready>the text tracks are ready</a>.

     <td><code id=mediaevents:dom-media-readystate><a href=#dom-media-readystate>readyState</a></code> is newly equal to <code id=mediaevents:dom-media-have_metadata><a href=#dom-media-have_metadata>HAVE_METADATA</a></code> or greater for the first time.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-loadeddata data-dfn-type=event><code>loadeddata</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event title="The loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame.">HTMLMediaElement/loadeddata_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-9><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent can render the <a href=#media-data id=mediaevents:media-data-7>media data</a> at the <a href=#current-playback-position id=mediaevents:current-playback-position>current playback
     position</a> for the first time.

     <td><code id=mediaevents:dom-media-readystate-2><a href=#dom-media-readystate>readyState</a></code> newly increased to <code id=mediaevents:dom-media-have_current_data><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code> or greater for the first time.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-canplay data-dfn-type=event><code>canplay</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event title="The canplay event is fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.">HTMLMediaElement/canplay_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-10><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent can resume playback of the <a href=#media-data id=mediaevents:media-data-8>media data</a>, but estimates that if
     playback were to be started now, the <a href=#media-resource id=mediaevents:media-resource-2>media resource</a> could not be rendered at the
     current playback rate up to its end without having to stop for further buffering of content.

     <td><code id=mediaevents:dom-media-readystate-3><a href=#dom-media-readystate>readyState</a></code> newly increased to <code id=mediaevents:dom-media-have_future_data><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> or greater.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-canplaythrough data-dfn-type=event><code>canplaythrough</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event title="The canplaythrough event is fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.">HTMLMediaElement/canplaythrough_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-11><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The user agent estimates that if playback were to be started now, the <a href=#media-resource id=mediaevents:media-resource-3>media
     resource</a> could be rendered at the current playback rate all the way to its end without
     having to stop for further buffering.

     <td><code id=mediaevents:dom-media-readystate-4><a href=#dom-media-readystate>readyState</a></code> is newly equal to <code id=mediaevents:dom-media-have_enough_data><a href=#dom-media-have_enough_data>HAVE_ENOUGH_DATA</a></code>.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-playing data-dfn-type=event><code>playing</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event title="The playing event is fired after playback is first started, and whenever it is restarted. For example it is fired when playback resumes after having been paused or delayed due to lack of data.">HTMLMediaElement/playing_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-12><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>Playback is ready to start after having been paused or delayed due to lack of <a href=#media-data id=mediaevents:media-data-9>media
     data</a>.

     <td><code id=mediaevents:dom-media-readystate-5><a href=#dom-media-readystate>readyState</a></code> is newly greater than or equal to
     <code id=mediaevents:dom-media-have_future_data-2><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code> and <code id=mediaevents:dom-media-paused><a href=#dom-media-paused>paused</a></code> is false, or <code id=mediaevents:dom-media-paused-2><a href=#dom-media-paused>paused</a></code> is newly false and <code id=mediaevents:dom-media-readystate-6><a href=#dom-media-readystate>readyState</a></code> is greater than or equal to <code id=mediaevents:dom-media-have_future_data-3><a href=#dom-media-have_future_data>HAVE_FUTURE_DATA</a></code>. Even if this event fires, the
     element might still not be <a href=#potentially-playing id=mediaevents:potentially-playing>potentially playing</a>, e.g. if the element is
     <a href=#paused-for-user-interaction id=mediaevents:paused-for-user-interaction>paused for user interaction</a> or <a href=#paused-for-in-band-content id=mediaevents:paused-for-in-band-content>paused for in-band content</a>.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-waiting data-dfn-type=event><code>waiting</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event title="The waiting event is fired when playback has stopped because of a temporary lack of data.">HTMLMediaElement/waiting_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td><code id=mediaevents:event-13><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>Playback has stopped because the next frame is not available, but the user agent expects
     that frame to become available in due course.

     <td><code id=mediaevents:dom-media-readystate-7><a href=#dom-media-readystate>readyState</a></code> is less than or equal to <code id=mediaevents:dom-media-have_current_data-2><a href=#dom-media-have_current_data>HAVE_CURRENT_DATA</a></code>, and <code id=mediaevents:dom-media-paused-3><a href=#dom-media-paused>paused</a></code> is false. Either <code id=mediaevents:dom-media-seeking><a href=#dom-media-seeking>seeking</a></code> is true, or the <a href=#current-playback-position id=mediaevents:current-playback-position-2>current playback position</a>
     is not contained in any of the ranges in <code id=mediaevents:dom-media-buffered><a href=#dom-media-buffered>buffered</a></code>. It
     is possible for playback to stop for other reasons without <code id=mediaevents:dom-media-paused-4><a href=#dom-media-paused>paused</a></code> being false, but those reasons do not fire this event
     (and when those situations resolve, a separate <code id=mediaevents:event-media-playing><a href=#event-media-playing>playing</a></code>
     event is not fired either): e.g., <a href=#ended-playback id=mediaevents:ended-playback>playback has ended</a>, or
     playback <a href=#stopped-due-to-errors id=mediaevents:stopped-due-to-errors>stopped due to errors</a>, or the element has <a href=#paused-for-user-interaction id=mediaevents:paused-for-user-interaction-2>paused for user
     interaction</a> or <a href=#paused-for-in-band-content id=mediaevents:paused-for-in-band-content-2>paused for in-band content</a>.

   <tbody><tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-seeking data-dfn-type=event><code>seeking</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event title="The seeking event is fired when a seek operation starts, meaning the Boolean seeking attribute has changed to true and the media is seeking a new position.">HTMLMediaElement/seeking_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-14><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The <code id=mediaevents:dom-media-seeking-2><a href=#dom-media-seeking>seeking</a></code> IDL attribute changed to true, and the user agent has started seeking to a new position.

     <td>

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-seeked data-dfn-type=event><code>seeked</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event title="The seeked event is fired when a seek operation completed, the current playback position has changed, and the Boolean seeking attribute is changed to false.">HTMLMediaElement/seeked_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-15><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The <code id=mediaevents:dom-media-seeking-3><a href=#dom-media-seeking>seeking</a></code> IDL attribute changed to false after the <a href=#current-playback-position id=mediaevents:current-playback-position-3>current playback position</a> was changed.

     <td>

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-ended data-dfn-type=event><code>ended</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event title="The ended event is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available.">HTMLMediaElement/ended_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-16><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>Playback has stopped because the end of the <a href=#media-resource id=mediaevents:media-resource-4>media resource</a> was reached.

     <td><code id=mediaevents:dom-media-currenttime><a href=#dom-media-currenttime>currentTime</a></code> equals the end of the <a href=#media-resource id=mediaevents:media-resource-5>media
     resource</a>; <code id=mediaevents:dom-media-ended><a href=#dom-media-ended>ended</a></code> is true.

   <tbody><tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-durationchange data-dfn-type=event><code>durationchange</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event title="The durationchange event is fired when the duration attribute has been updated.">HTMLMediaElement/durationchange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-17><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The <code id=mediaevents:dom-media-duration><a href=#dom-media-duration>duration</a></code> attribute has just been updated.

     <td>

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-timeupdate data-dfn-type=event><code>timeupdate</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event title="The timeupdate event is fired when the time indicated by the currentTime attribute has been updated.">HTMLMediaElement/timeupdate_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-18><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The <a href=#current-playback-position id=mediaevents:current-playback-position-4>current playback position</a> changed as part of normal playback or in an especially interesting way, for example discontinuously.

     <td>

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-play data-dfn-type=event><code>play</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event title="The play event is fired when the paused property is changed from true to false, as a result of the play method, or the autoplay attribute.">HTMLMediaElement/play_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-19><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The element is no longer paused. Fired after the <code id=mediaevents:dom-media-play><a href=#dom-media-play>play()</a></code>
     method has returned, or when the <code id=mediaevents:attr-media-autoplay><a href=#attr-media-autoplay>autoplay</a></code> attribute
     has caused playback to begin.

     <td><code id=mediaevents:dom-media-paused-5><a href=#dom-media-paused>paused</a></code> is newly false.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-pause data-dfn-type=event><code>pause</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event title="The pause event is sent when a request to pause an activity is handled and the activity has entered its paused state, most commonly after the media has been paused through a call to the element's pause() method.">HTMLMediaElement/pause_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-20><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The element has been paused. Fired after the <code id=mediaevents:dom-media-pause><a href=#dom-media-pause>pause()</a></code>
     method has returned.

     <td><code id=mediaevents:dom-media-paused-6><a href=#dom-media-paused>paused</a></code> is newly true.

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-ratechange data-dfn-type=event><code>ratechange</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ratechange_event title="The ratechange event is fired when the playback rate has changed.">HTMLMediaElement/ratechange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><td><code id=mediaevents:event-21><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>Either the <code id=mediaevents:dom-media-defaultplaybackrate><a href=#dom-media-defaultplaybackrate>defaultPlaybackRate</a></code> or the
     <code id=mediaevents:dom-media-playbackrate><a href=#dom-media-playbackrate>playbackRate</a></code> attribute has just been updated.

     <td>

   <tbody><tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-resize data-dfn-type=event><code>resize</code></dfn>

     <td><code id=mediaevents:event-22><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>One or both of the <code id=mediaevents:dom-video-videowidth><a href=#dom-video-videowidth>videoWidth</a></code> and <code id=mediaevents:dom-video-videoheight><a href=#dom-video-videoheight>videoHeight</a></code> attributes have just been updated.

     <td><a href=#media-element id=mediaevents:media-element-3>Media element</a> is a <code id=mediaevents:the-video-element><a href=#the-video-element>video</a></code> element; <code id=mediaevents:dom-media-readystate-8><a href=#dom-media-readystate>readyState</a></code> is not <code id=mediaevents:dom-media-have_nothing><a href=#dom-media-have_nothing>HAVE_NOTHING</a></code>

    <tr><td><dfn data-dfn-for=HTMLMediaElement id=event-media-volumechange data-dfn-type=event><code>volumechange</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event title="The volumechange event is fired when either the volume attribute or the muted attribute has changed.">HTMLMediaElement/volumechange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>3.1+</span></span><span class="chrome yes"><span>Chrome</span><span>3+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td><code id=mediaevents:event-23><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>Either the <code id=mediaevents:dom-media-volume><a href=#dom-media-volume>volume</a></code> attribute or the <code id=mediaevents:dom-media-muted><a href=#dom-media-muted>muted</a></code> attribute has changed. Fired after the relevant
     attribute's setter has returned.

     <td>

  </table>


  <p>The following event fires on <code id=mediaevents:the-source-element><a href=embedded-content.html#the-source-element>source</a></code> elements:</p>

  <table><thead><tr><th>Event name

     <th>Interface

     <th>Fired when...

   <tbody><tr><td><dfn data-dfn-for=HTMLSourceElement id=event-source-error data-dfn-type=event><code>error</code></dfn>

     <td><code id=mediaevents:event-24><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>An error occurs while fetching the <a href=#media-data id=mediaevents:media-data-10>media data</a> or the type of the resource
     is not a supported media format.

  </table>


  <p>The following events fire on <code id=mediaevents:audiotracklist><a href=#audiotracklist>AudioTrackList</a></code>, <code id=mediaevents:videotracklist><a href=#videotracklist>VideoTrackList</a></code>, and
  <code id=mediaevents:texttracklist><a href=#texttracklist>TextTrackList</a></code> objects:</p>

  <table><thead><tr><th>Event name

     <th>Interface

     <th>Fired when...

   <tbody><tr><td><dfn data-dfn-for=AudioTrackList,VideoTrackList,TextTrackList id=event-media-change data-dfn-type=event><code>change</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList/change_event title="The change event is fired when an audio track is enabled or disabled, for example by changing the track's enabled property.">AudioTrackList/change_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList/change_event title="The change event is fired when a text track is made active or inactive, or a TextTrackList is otherwise changed.">TextTrackList/change_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>33+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/change_event title="The change event is fired when a video track is made active or inactive, for example by changing the track's selected property.">VideoTrackList/change_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td><code id=mediaevents:event-25><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>One or more tracks in the track list have been enabled or disabled.

    <tr><td><dfn data-dfn-for=AudioTrackList,VideoTrackList,TextTrackList id=event-media-addtrack data-dfn-type=event><code>addtrack</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList/addtrack_event title="The addtrack event is fired when a track is added to an AudioTrackList.">AudioTrackList/addtrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList/addtrack_event title="The addtrack event is fired when a track is added to a TextTrackList.">TextTrackList/addtrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>11</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/addtrack_event title="The addtrack event is fired when a video track is added to a VideoTrackList.">VideoTrackList/addtrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td><code id=mediaevents:trackevent><a href=#trackevent>TrackEvent</a></code>

     <td>A track has been added to the track list.

    <tr><td><dfn data-dfn-for=AudioTrackList,VideoTrackList,TextTrackList id=event-media-removetrack data-dfn-type=event><code>removetrack</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/AudioTrackList/removetrack_event title="The removetrack event is fired when a track is removed from an AudioTrackList.">AudioTrackList/removetrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackList/removetrack_event title="The removetrack event is fired when a track is removed from a TextTrackList.">TextTrackList/removetrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>33+</span></span><hr><span class="opera yes"><span>Opera</span><span>20+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>20+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/removetrack_event title="The removetrack event is fired when a video track is removed from a VideoTrackList.">VideoTrackList/removetrack_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span title="Requires setting a user preference or runtime flag.">🔰 33+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span title="Requires setting a user preference or runtime flag.">🔰 37+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span title="Requires setting a user preference or runtime flag.">🔰 79+</span></span><hr><span class="edge no"><span>Edge (Legacy)</span><span>No</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><td><code id=mediaevents:trackevent-2><a href=#trackevent>TrackEvent</a></code>

     <td>A track has been removed from the track list.

  </table>



  <p>The following event fires on <code id=mediaevents:texttrack><a href=#texttrack>TextTrack</a></code> objects and <code id=mediaevents:the-track-element><a href=#the-track-element>track</a></code> elements:</p>

  <table><thead><tr><th>Event name

     <th>Interface

     <th>Fired when...

   <tbody><tr><td><dfn data-dfn-for=TextTrack,HTMLTrackElement id=event-media-cuechange data-dfn-type=event><code>cuechange</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLTrackElement/cuechange_event title="The cuechange event fires when a TextTrack has changed the currently displaying cues. The event is fired on both the TextTrack and the HTMLTrackElement in which it's being presented, if any.">HTMLTrackElement/cuechange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>68+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>32+</span></span><hr><span class="opera yes"><span>Opera</span><span>19+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>14+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4.3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>19+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/cuechange_event title="The cuechange event fires when a TextTrack has changed the currently displaying cues. The event is fired on both the TextTrack and the HTMLTrackElement in which it's being presented, if any.">TextTrack/cuechange_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td><code id=mediaevents:event-26><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>One or more cues in the track have become active or stopped being active.

  </table>


  <p>The following events fire on <code id=mediaevents:the-track-element-2><a href=#the-track-element>track</a></code> elements:</p>

  <table><thead><tr><th>Event name

     <th>Interface

     <th>Fired when...

   <tbody><tr><td><dfn data-dfn-for=HTMLTrackElement id=event-track-error data-dfn-type=event><code>error</code></dfn>

     <td><code id=mediaevents:event-27><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>An error occurs while fetching the track data or the type of the resource is not supported text track format.

    <tr><td><dfn data-dfn-for=HTMLTrackElement id=event-track-load data-dfn-type=event><code>load</code></dfn>

     <td><code id=mediaevents:event-28><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>A track data has been fetched and successfully processed.
  </table>


  <p>The following events fire on <code id=mediaevents:texttrackcue><a href=#texttrackcue>TextTrackCue</a></code> objects:</p>

  <table><thead><tr><th>Event name

     <th>Interface

     <th>Fired when...

   <tbody><tr><td><dfn data-dfn-for=TextTrackCue id=event-media-enter data-dfn-type=event><code>enter</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue/enter_event title="The enter event fires when a cue becomes active. In the case of subtitles or a caption this is when it displays over the media.">TextTrackCue/enter_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td><code id=mediaevents:event-29><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The cue has become active.

    <tr><td><dfn data-dfn-for=TextTrackCue id=event-media-exit data-dfn-type=event><code>exit</code></dfn>

     <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/TextTrackCue/exit_event title="The exit event fires when a cue stops being active.">TextTrackCue/exit_event</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>31+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>23+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><td><code id=mediaevents:event-30><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code>

     <td>The cue has stopped being active.

  </table>


  

  <h5 id=security-and-privacy-considerations><span class=secno>4.8.11.17</span> Security and privacy considerations<a href=#security-and-privacy-considerations class=self-link></a></h5>

  <p>The main security and privacy implications of the <code id=security-and-privacy-considerations:the-video-element><a href=#the-video-element>video</a></code> and <code id=security-and-privacy-considerations:the-audio-element><a href=#the-audio-element>audio</a></code>
  elements come from the ability to embed media cross-origin. There are two directions that threats
  can flow: from hostile content to a victim page, and from a hostile page to victim content.</p>

  <hr>

  <p>If a victim page embeds hostile content, the threat is that the content might contain scripted
  code that attempts to interact with the <code id=security-and-privacy-considerations:document><a href=dom.html#document>Document</a></code> that embeds the content. To avoid
  this, user agents must ensure that there is no access from the content to the embedding page. In
  the case of media content that uses DOM concepts, the embedded content must be treated as if it
  was in its own unrelated <a id=security-and-privacy-considerations:top-level-traversable href=document-sequences.html#top-level-traversable>top-level traversable</a>.</p>

  <p class=example>For instance, if an SVG animation was embedded in a <code id=security-and-privacy-considerations:the-video-element-2><a href=#the-video-element>video</a></code> element,
  the user agent would not give it access to the DOM of the outer page. From the perspective of
  scripts in the SVG resource, the SVG file would appear to be in a lone top-level traversable
  with no parent.</p>

  <hr>

  <p>If a hostile page embeds victim content, the threat is that the embedding page could obtain
  information from the content that it would not otherwise have access to. The API does expose some
  information: the existence of the media, its type, its duration, its size, and the performance
  characteristics of its host. Such information is already potentially problematic, but in practice
  the same information can more or less be obtained using the <code id=security-and-privacy-considerations:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element, and so it
  has been deemed acceptable.</p>

  <p>However, significantly more sensitive information could be obtained if the user agent further
  exposes metadata within the content, such as subtitles. That information is therefore only exposed
  if the video resource uses CORS. The <code id=security-and-privacy-considerations:attr-media-crossorigin><a href=#attr-media-crossorigin>crossorigin</a></code>
  attribute allows authors to enable CORS. <a href=references.html#refsFETCH>[FETCH]</a></p>

  <p class=example>Without this restriction, an attacker could trick a user running within a
  corporate network into visiting a site that attempts to load a video from a previously leaked
  location on the corporation's intranet. If such a video included confidential plans for a new
  product, then being able to read the subtitles would present a serious confidentiality breach.</p>

  


  <h5 id=best-practices-for-authors-using-media-elements><span class=secno>4.8.11.18</span> Best practices for authors using media elements<a href=#best-practices-for-authors-using-media-elements class=self-link></a></h5>

  <p><i>This section is non-normative.</i></p>

  <p>Playing audio and video resources on small devices such as set-top boxes or mobile phones is
  often constrained by limited hardware resources in the device. For example, a device might only
  support three simultaneous videos. For this reason, it is a good practice to release resources
  held by <a href=#media-element id=best-practices-for-authors-using-media-elements:media-element>media elements</a> when they are done playing, either by
  being very careful about removing all references to the element and allowing it to be garbage
  collected, or, even better, by setting the element's <code id=best-practices-for-authors-using-media-elements:attr-media-src><a href=#attr-media-src>src</a></code>
  attribute to an empty string. In cases where <code id=best-practices-for-authors-using-media-elements:dom-media-srcobject><a href=#dom-media-srcobject>srcObject</a></code>
  was set, instead set the <code id=best-practices-for-authors-using-media-elements:dom-media-srcobject-2><a href=#dom-media-srcobject>srcObject</a></code> to null.</p>

  <p>Similarly, when the playback rate is not exactly 1.0, hardware, software, or format limitations
  can cause video frames to be dropped and audio to be choppy or muted.</p>


  

  <h5 id=best-practices-for-implementers-of-media-elements><span class=secno>4.8.11.19</span> Best practices for implementers of media elements<a href=#best-practices-for-implementers-of-media-elements class=self-link></a></h5>

  <p><i>This section is non-normative.</i></p>

  <p>How accurately various aspects of the <a href=#media-element id=best-practices-for-implementers-of-media-elements:media-element>media element</a> API are implemented is
  considered a quality-of-implementation issue.</p>

  <p>For example, when implementing the <code id=best-practices-for-implementers-of-media-elements:dom-media-buffered><a href=#dom-media-buffered>buffered</a></code> attribute,
  how precise an implementation reports the ranges that have been buffered depends on how carefully
  the user agent inspects the data. Since the API reports ranges as times, but the data is obtained
  in byte streams, a user agent receiving a variable-bitrate stream might only be able to determine
  precise times by actually decoding all of the data. User agents aren't required to do this,
  however; they can instead return estimates (e.g. based on the average bitrate seen so far) which
  get revised as more information becomes available.</p>

  <p>As a general rule, user agents are urged to be conservative rather than optimistic. For
  example, it would be bad to report that everything had been buffered when it had not.</p>

  <p>Another quality-of-implementation issue would be playing a video backwards when the codec is
  designed only for forward playback (e.g. there aren't many key frames, and they are far apart, and
  the intervening frames only have deltas from the previous frame). User agents could do a poor job,
  e.g. only showing key frames; however, better implementations would do more work and thus do a
  better job, e.g. actually decoding parts of the video forwards, storing the complete frames, and
  then playing the frames backwards.</p>

  <p>Similarly, while implementations are allowed to drop buffered data at any time (there is no
  requirement that a user agent keep all the media data obtained for the lifetime of the media
  element), it is again a quality of implementation issue: user agents with sufficient resources to
  keep all the data around are encouraged to do so, as this allows for a better user experience. For
  example, if the user is watching a live stream, a user agent could allow the user only to view the
  live video; however, a better user agent would buffer everything and allow the user to seek
  through the earlier material, pause it, play it forwards and backwards, etc.</p>

  <hr>

  <p>When a <a href=#media-element id=best-practices-for-implementers-of-media-elements:media-element-2>media element</a> that is paused is <a href=infrastructure.html#remove-an-element-from-a-document id=best-practices-for-implementers-of-media-elements:remove-an-element-from-a-document>removed from a document</a> and not reinserted before the next time the <a id=best-practices-for-implementers-of-media-elements:event-loop href=webappapis.html#event-loop>event
  loop</a> reaches <a href=webappapis.html#step1>step 1</a>, implementations that are resource constrained are encouraged to take
  that opportunity to release all hardware resources (like video planes, networking resources, and
  data buffers) used by the <a href=#media-element id=best-practices-for-implementers-of-media-elements:media-element-3>media element</a>. (User agents still have to keep track of the
  playback position and so forth, though, in case playback is later restarted.)</p>

  



  <nav><a href=iframe-embed-object.html>← 4.8.5 The
  iframe element</a> — <a href=index.html>Table of Contents</a> — <a href=image-maps.html>4.8.12 The map element →</a></nav>
